代码片段 → CSS → 渐变文本 渐变文本 Chris Coyier 于 2012年12月19日 这仅适用于WebKit，但它是实现此目的最简洁的方式，因为文本仍然是可编辑和可选择的网页文本。 h1 { font-size: 72px; background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 示例
看起来非常棒。将为Logo带来神奇的效果（尽管它仅限于webkit xD）
所以这种方法有一个缺点/文本阴影与这些属性不兼容
渲染文本两次，绝对定位第二个文本使其覆盖在另一个文本之上。然后给底部的文本添加文本阴影。搞定。
不错，Jake！我试过了。效果非常好！击个掌！
这在我的使用中有效
text-shadow: 4px 4px 4px black;
我的使用也正常工作（代码片段如下）
{
text-shadow: -1px 2px rgba(128, 128, 128, 0.5);
background: -webkit-linear-gradient(whitesmoke, #1e2425);
background-clip: text;
-webkit-text-fill-color: transparent;
}
很棒的修复，我该如何保持背景颜色为黑色？我正在模态窗口中使用它，当我使用
-webkit-text-fill-color: transparent;时，我的黑色背景消失了…我不明白如何同时使用背景添加下划线过渡。
哇！太棒了，感谢你的帖子！我可以在我的网站上使用一些东西。
哈哈，还有谁爱上了新的网站外观
试过了，我得到的只是黑色文本，以及看起来像文本阴影为0px -1px 1px #FFF的东西？
这真的不整洁，但这就是它看起来的样子！我犯错了吗？我使用了完全相同的代码！
示例没有按照我的预期显示？
它看起来只是一个普通的标题。
有人能帮忙吗？
嗯，如果你应用了文本阴影，它就不起作用。一定还有其他方法。顺便说一句，“参考URL”已失效。
我认为这是唯一真正有效的解决方案： http://nicewebtype.com/notes/2009/07/24/pure-css-text-gradient-no-pngs/
该解决方案需要预先知道文本才能用于你的:after规则，因此它不适用于CMS中的动态输出，或者在相邻的span中复制你的内容。假设你将漂亮的渐变应用到网站的关键词上，那么复制span的想法=搜索引擎看到的重复内容，这对SEO来说不太好。
文本渐变完全属于“锦上添花”的范畴，我很高兴能在Chrome/Safari中向客户展示一些漂亮的东西，并且在其他浏览器中使用纯文本作为回退也是完全可以接受的。
我正在浏览互联网，偶然发现了这个帖子。
David，如果你使用
content: attr(title);，就可以解决CMS中:after的问题。如果你的title属性已经被“占用”，这也可以与数据属性一起使用。干杯！
太棒了，Aaron和Marvintus。谢谢。
与IE(8)不兼容
哈哈，没有东西与IE(8)兼容
当然它在IE中不起作用。但我仍然会使用它并应用条件语句……我相信你们大多数人都会这样做。
失效链接。“参考URL”
谢谢，我直接删除它，演示就足够了。
感谢你的帖子！
一如既往地很棒！ :)
在同一样式中不适用于文本阴影 :(
我可能不得不恢复使用PNG。
没关系，似乎有人已经解决了： http://stackoverflow.com/questions/3802218/how-do-i-combined-css-text-shadow-and-background-image-webkit-gradient
Salmonface - 那也在使用:after方法。哎呀。因此，目前对于文本来说，是渐变或阴影/描边。
实际上，我们现在可以使用-webkit-text-stroke（我们的上下文仅限于webkit）。
它在Mozilla和IE中不起作用。
如何在以上两个浏览器中应用此效果？
哇！太棒了，感谢你的帖子！我可以在我的网站上使用一些东西。
你好！
有没有办法在渐变文本上添加文本阴影？我尝试过这样做，但阴影位于文本前面…
嗨，Alex。你可以，但这需要稍微多一点的标记。看看 这里。干杯！
很棒的技术，但我刚刚在视网膜显示屏的iPad上测试了它，文本看起来很模糊，尤其是在放大时 - 就像它实际上是位图图像一样。
我会继续尝试看看是否有解决方案，除非有人能启发我？
我使用最新的Google Chrome（版本19）测试了页面，文本完全不可见。请告知是否有其他方法可以实现文本渐变？
看起来不错，直到我添加了一个白色文本阴影，然后它就乱了。我希望负责CSS和浏览器的人能有一次走到一起，修复这些东西……自从Pagemaker以来，这就是基本的页面布局内容……这没什么难的！
但这不适用于文本阴影。
完美的3D文本可以在以下位置看到： http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-nonintrusive-css-text-gradients/
他们使用一个不错的:after伪类来实现文本阴影
但我发现如果需要多行渐变文本，就无法插入换行符。我也尝试过使用
和\r，但都无效。
如果有人找到解决方法，请告诉我。
有没有什么方法可以为渐变文本添加文本阴影？
很棒的文章！
我的Firefox浏览器在显示渐变时遇到问题 - 有人知道是否有适用于FF的代码片段吗？
谢谢！ :)
非常有帮助。谢谢！
太棒了！这太赞了。你可以用它做一些很酷但无用的东西，比如这个
http://jsfiddle.net/hzNmQ/
很棒。但只在Chrome中有效，Firefox中无效。
或者这个 http://jsfiddle.net/kk5eG/
我写了一个简单的SCSS混合宏，它包含了这个技巧，并带有一个很酷的非webkit回退，将你的两种颜色混合在50%处。
@mixin lineartextgradient($color1, $color2, $startPoint:left top, $endPoint:left bottom) { color: mix($color1, $color2); background: -webkit-gradient(linear, $startPoint, $endPoint, from($color1), to($color2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }实际上，这在Safari上不起作用
正如我告诉Alex的，有一种方法可以使用标题标签内的绝对定位的span添加类似文本阴影的效果。这是一个有效的JSFiddle。
干杯！
它只在Chrome中有效
它在Edge中也有效，Edge是Windows 10自带的新浏览器，显然是webkit内核，因为你需要使用供应商前缀 -webkit-。
太好了，谢谢
这在火狐上不起作用，只在Chrome和Safari上有效？您是否有任何方法也可以在火狐上显示？
你好，有没有关于边框渐变的想法。
我不知道是否有人问过这个问题，但在火狐中这个渐变技巧有效吗？我将-webkit替换为-moz，以为结果会一样，但渐变似乎是字母后面的渐变框，而不是用渐变填充字母。
跨浏览器兼容性怎么样？
最上面写着：“仅限WebKit” - 这意味着它在Firefox或Safari中不起作用，当然在IE中也不起作用。
这在原生Android浏览器上惨败。渐变显示出来了，但只是一个大的渐变块。
很棒的文章！！继续努力！！
但是火狐和欧朋呢……有什么解决办法吗？？
嗯嗯嗯，不错！！但是……期待所有浏览器的支持
感谢分享 :)
如果您添加“text-shadow”属性，它会有视觉问题。
在IE10中不起作用……其他浏览器还差得远
您是否有任何方法也可以在火狐上显示？它在Chrome中运行良好
现在这不是“仅限webkit”了。“Opera”也采用了这个前缀，但不起作用……
这是一个渐变文本+文本阴影的演示 http://jsfiddle.net/2GgqR/258/
嗨，它对我有用！但是否可以从此处创建水平渐变。
非常感谢！
Nub
只需添加：“left”或“right”，如下所示
background: -webkit-linear-gradient(right, #FC3,#FC3,#fff);
干得好……继续努力……
谢谢
h3{font-family: ‘Black Ops One’, cursive;
font-size:50px;
background: -webkit-linear-gradient(#fff, #FC3,#FC3,#fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
只显示纯黑色文本！！！！！！！
在Chrome和Opera上效果不错，但在Firefox上没有效果:(
请为火狐文本渐变找到一个解决方案。
即使在火狐上也不起作用，只在Chrome上有效。
这在Edge上有效，Edge是Windows 10自带的浏览器。谢谢！
您只需要 -webkit-background-clip: text; 的供应商前缀。
-webkit-text-fill-color: transparent。
很棒的文章！
谢谢！
在Android浏览器中使用很酷。
它在火狐中不支持。
对于火狐用户，这里有一个有效的codepen
http://codepen.io/giana/pen/RPdLaQ
你真是太棒了……在Chrome、Firefox和Safari中都有效
嘿！这仅适用于Chrome……
嘿！“这仅限WebKit……” - Chris Coyier
WebKit是Chrome，没错……但额外赠送！……你还可以获得Safari！
与所有浏览器前缀属性一样，友好的回退很容易实现！只需在与渐变相关的属性之前为文本设置一个颜色属性，在不支持webkit的浏览器上，你将获得漂亮的纯色。
毕竟，渐变填充文本是一种癖好，呃……我的意思是，一种非必要的样式。如果你真的必须使用它，你可以尝试使用SVG元素并应用任何花招，呃……我的意思是样式！干杯！
大家好！
只是为了向后续读者更新一下Firefox的情况。
在FF 49.0.2（在Mac上？）上有效？！
据我所知，Firefox 越来越多的支持webkit标准。如果IE也支持并获得更多webkit - 我们就搞定了。
在 EZKAY 上——截至您发帖时——不要指望 MS 会将其添加到 IE 中，因为他们已停止开发——除了罕见的安全修复。
MS Edge 应该会在将来的某个时间允许这样做。截至我发帖时，Edge 仍然显示基本的字体颜色。
如果您加载上面 LINGTALFIs CodePen 中的代码，该代码会足够降级到标准颜色。
是否有某种变通代码，使其在 WebKit 浏览器中看起来不错，但在其他浏览器中仍然显示为纯文本？IE 中的字母存在，但除非您突出显示它们，否则它们不可见。
太棒了！这正是我要找的。
对于旧浏览器，如 IE，我们可以使用 SVG
如果这不起作用，请使用此方法
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
h1{
text-transform: uppercase;
background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font: {
size: 20vw;
};
}
感谢分享，我在 Chrome 69 64 位上尝试过，它根本不起作用。
我大约 5-6 年前创建了一个库，也许对某些人有用（至少可以作为灵感），名为 Gradext。
在文本上动画渐变，线性、径向、水平、垂直！无论如何。
不错，可以用它制作对角线渐变吗？
不错，谢谢！刚刚发现如何使用从一侧到另一侧的文本渐变。
当应用“text-shadow”时，它不起作用。文本阴影覆盖了颜色。
对于仅将文本显示为透明的浏览器（Safari 移动版），备用方案是什么？
没事了，我找到了 -webkit-text-fill-color: transparent; 导致 Safari 移动版上的文本不可见，但它需要保留 Firefox 和 Edge 上的渐变。我保留了该行，并使用以下内容将其从 Safari 移动版中删除
@supports (-webkit-overflow-scrolling: touch) {
-webkit-text-fill-color: unset;
}
如果有人找到更好的解决方案，请告诉我
这真的很有帮助！我最终将其用于 Font Awesome 图标，效果很好！
它在 IE11 中可以工作吗？我试过了，但没有成功。
如果您能使其在 IE11 中工作，请告诉我们
我想知道如何在打印介质上实现这一点。如果我尝试打印它或通过 macOS 在 Safari 中打印创建 PDF，它不会显示字体文本。我必须取消设置背景、-webkit-background-clip 和 -webkit-text-fill-color 以获得默认的文档字体颜色。
伙计，我如何使用这种方法更改渐变方向？
谢谢
只需在括号内的颜色前面添加 90 或 180 deg 即可
嘿，谢谢！但是我们如何水平设置渐变？
我使用的是相同的代码
但是当我使用鼠标选择标题时，文本会消失，只剩下蓝色的高亮显示。