使用CSS3渐变背景和background-clip: text实现的渐变标题文本特效

思路是使用文本去裁剪背景。

css3, 文本特效，clip

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #1a1a1a;
    color: #404040;
    text-align: center;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
p {
    text-transform: uppercase;
    letter-spacing: 0.5em;
    display: block;
    border-left: 0;
    border-right: 0;
    padding: 1.5em 0em;
}
p span {
    font-size: 4em;
    font-weight: 700;
    letter-spacing: 0;
    padding: 0.3em 0;
    display: block;
    text-shadow: 0 0 60px rgba(255, 255, 255, 0.5);
    background: #ff0084;
    background: -webkit-linear-gradient(left, #0015ff 0%, #ff0084 100%);
    background: linear-gradient(to right, #0015ff 0%, #ff0084 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

HTML

思路是使用文本去裁剪背景。

css3, 文本特效，clip

编辑器支持Emmet

快捷键

思路是使用文本去裁剪背景。

css3, 文本特效，clip

使用CSS3背景裁剪（background-clip）特性实现的文本标题透视特效

CSS3使用background-clip属性实现文本裁剪效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：