🌈
渐变文字 CSS
生成带渐变色的文字 CSS(background-clip),标题、Logo 更吸睛。
本地处理 · 不上传
加载工具中…
相关：渐变文字 · 文字渐变 · gradient text · background-clip · 彩色标题
渐变文字 CSS 生成让文字填充渐变色的 CSS 代码，基于背景裁剪实现，实时预览并输出代码。实现依赖背景裁剪加透明文字色，两步缺一不可，且不宜用于正文段落。
使用步骤
- 设置渐变颜色与方向
- 输入预览文字
- 调整效果
- 复制生成的 CSS
使用场景
- 制作醒目的标题文字
- 品牌视觉中的强调元素
- 落地页的视觉焦点
- 设计中的文字装饰
小贴士
- 实现原理是给元素设渐变背景，再用 background-clip 把背景裁剪到文字形状，同时把文字颜色设为透明。
- 务必保证渐变的各段颜色与背景都有足够对比度，渐变中间变浅的部分最容易出现可读性问题。
- 渐变文字不宜用于正文，长段落使用会明显影响阅读，它只适合标题与短句。
常见问题
为什么文字看不见？
通常是漏了 `-webkit-background-clip: text` 或没有把文字颜色设为 transparent。这两步缺一不可：前者把背景裁到文字形状，后者让背景透出来。
会影响可读性吗？
会。渐变中间变浅的部分与背景对比度可能不足。使用时应检查整个渐变范围内的对比度，并且只用于标题这类短文本，不要用在正文段落上。
能选中复制吗？
可以，文字仍是真实的文本节点，能被选中、搜索和被屏幕阅读器读取。这是它相比把文字做成图片的重要优势。
渐变文字 CSS是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用渐变文字 CSS，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。