Toolzi LogoToolzi

CSS渐变文字生成器

即时生成CSS渐变文字效果。自定义颜色和方向，实时预览并复制CSS代码。

0%
100%

预览

Hello World
48px

CSS代码

.gradient-text {
  background: linear-gradient(to right, #6366f1 0%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

什么是CSS渐变文字？

CSS渐变文字通过将渐变作为元素的背景，再用background-clip: text裁剪为文字形状来实现彩色渐变文字效果。无需图片即可创建吸引眼球的排版。

如何在CSS中为文字应用渐变

为元素设置渐变背景，然后应用-webkit-background-clip: text和-webkit-text-fill-color: transparent。background-clip: text将背景裁剪为文字形状，使渐变透过字形显现。

浏览器兼容性

-webkit-background-clip: text在所有现代浏览器（Chrome、Firefox、Safari、Edge）中均受支持。标准background-clip: text属性也获得广泛支持，建议同时使用两者以确保完整兼容。

常见问题

如何用CSS制作渐变文字？
将渐变应用为背景，然后使用-webkit-background-clip: text和-webkit-text-fill-color: transparent，即可让渐变透过文字显现。
CSS渐变文字在所有浏览器中都能使用吗？
是的。-webkit-background-clip: text在所有现代浏览器（Chrome、Firefox、Safari、Edge）中均受支持。
可以对文字使用径向或锥形渐变吗？
可以。任何CSS渐变类型（linear、radial、conic）都可以作为渐变文字的背景使用。
为什么需要-webkit-text-fill-color: transparent？
-webkit-text-fill-color在WebKit浏览器中会覆盖文字颜色。设置为transparent后，渐变背景就能透过文字显现。
CSS渐变文字可以添加动画效果吗？
可以。可以通过动画background-position或结合background-size使用CSS @keyframes来创建动态渐变文字效果。
color和-webkit-text-fill-color有什么区别？
在支持该属性的浏览器中，-webkit-text-fill-color的优先级高于color，从而使渐变背景能够透过文字显现。

相关工具

CSS Gradient Generator →