CSS3兼容主流浏览器的渐变色文本特效

Gradient Text，使用@supports来检测浏览器是否支持background-clip和text-fill-color特性，如果不支持，则回退为普通文本。

h5, css3, 文本效果, rainbow

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2910
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* -------------------------------- */
/* Gradient Text                    */
/* -------------------------------- */

.text-gradient {
    display: inline-block;
    color: #a166ab;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) and ((text-fill-color: transparent) or (-webkit-text-fill-color: transparent)) {
    .text-gradient {
        background-image: linear-gradient(90deg, #f79533 0%, #f37055 15%, #ef4e7b 30%, #a166ab 44%, #5073b8 58%, #1098ad 72%, #07b39b 86%, #6dba82 100%);
        background-size: cover;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
    }
}
/* -------------------------------- */
/* Definition List w/ Leading Lines */
/* https://codepen.io/tannerhodges/pen/YrPMgv */
/* -------------------------------- */

dl {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 1em;
    grid-row-gap: 0.5em;
    margin: 1em;
    line-height: 1.3;
}
dt {
    position: relative;
    grid-column: 1;
    font-weight: bold;
    overflow: hidden;
}
dd {
    grid-column: 2;
    margin-left: 0;
}
dt::after {
    position: absolute;
    top: 0.6em;
    width: 100%;
    margin-left: 0.75em;
    border-bottom: 1px dotted #ccc;
    content: '';
}
/* -------------------------------- */
/* Margins                          */
/* -------------------------------- */

body {
    margin: 0 1em 3em;
}
main {
    margin: 0 auto;
    max-width: 36em;
}
h1,
h2 {
    margin-bottom: 0;
}

HTML

<main>
    <h1 class="text-gradient">Gradient Text With <code>@supports</code></h1>

<p>This gradient text will only be applied to browsers that support both <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip"><code>background-clip</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color"><code>text-fill-color</code></a>.
        Otherwise, it will fall back to a solid color.</p>

<p>Since Internet Explorer supports neither <code>@supports</code> nor the gradient text effect, we can avoid using extra JavaScript to detect the browser version.</p>

<h2 class="text-gradient">Browser Compatibility <small>(as of 2017-09-14)</small></h2>
    <dl>
        <dt>IE</dt>
        <dd>⚠️ Fallback</dd>
        <dt>Edge</dt>
        <dd>✅ 15+</dd>
        <dt>Firefox</dt>
        <dd>✅ 49+</dd>
        <dt>Chrome</dt>
        <dd>✅</dd>
        <dt>Safari</dt>
        <dd>✅</dd>
        <dt>Opera</dt>
        <dd>✅ 15+</dd>
        <dt>iOS Safari</dt>
        <dd>✅</dd>
        <dt>Opera Mini</dt>
        <dd>⚠️ Fallback</dd>
        <dt>Android Browser</dt>
        <dd>✅ <i>but…</i>
            <br>⚠️ Fallback for Android&nbsp;3</dd>
        <dt>Chrome for Android</dt>
        <dd>✅</dd>
    </dl>

<h2 class="text-gradient">References</h2>
    <ul>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@supports">@supports | MDN</a>
        </li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip"><code>background-clip</code></a>
        </li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color"><code>text-fill-color</code></a>
        </li>
        <li><a href="https://caniuse.com/#search=webkit-text-fill-color">Can I use… CSS text-stroke and text-fill</a>
        </li>
    </ul>
</main>

Gradient Text，使用@supports来检测浏览器是否支持background-clip和text-fill-color特性，如果不支持，则回退为普通文本。

h5, css3, 文本效果, rainbow

编辑器支持Emmet

快捷键

Gradient Text，使用@supports来检测浏览器是否支持background-clip和text-fill-color特性，如果不支持，则回退为普通文本。

h5, css3, 文本效果, rainbow

使用SVG和CSS3 mask特性实现的文本内视频遮罩特效

使用CSS3 clip-path实现的标题文本水纹波动动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：