在此运行 完全在你的浏览器里运行，不上传、不登录
文字渐变生成器
挑选颜色停止点与角度，实时预览 CSS background-clip 渐变文字并一键复制代码。
文字
颜色停止点
停止点沿角度方向依次排布，第一个是渐变起点色，最后一个是终点色。内置四个色块，按需取用即可。
预览
Gradient
生成的 CSS 采用 -webkit-background-clip: text 配合 color: transparent 的标准写法，当前所有浏览器均支持，旧浏览器回退为第一个停止点颜色。
怎么用
- 输入示例文字并设置字号（像素）。
- 为四个停止点挑颜色。它们沿渐变方向依次排布，停止点 1 是起点，停止点 4 是终点。
- 设置角度（度）：0 为自下而上，90 为自左向右，180 为自上而下。
- 每次调整都会即时刷新预览，点击生成 CSS，复制样式表与 HTML 片段。
常见用途
- 首屏大标题 —— 给落地页主标题上渐变，不必先动构建。
- 标志字标 —— 在导出素材前，先在文字上试品牌色。
- 社交 Banner —— 让网页标题与封面图的渐变保持一致。
- CSS 教学 —— 演示 background-clip: text 与 color: transparent 如何配合。
常见问题
问：CSS 渐变文字的原理是什么？ 答：渐变设为元素背景，background-clip: text 把背景裁剪到文字形状，color: transparent 让文字本身的颜色透明，从而透出背景。
问：不支持的浏览器会怎样？ 答：当前浏览器都支持这些标准属性；旧引擎下文字会保留自身颜色，因此样式表以标准的 color: transparent 写法为主，可平滑降级。
问：能用超过两个颜色吗？ 答：可以。CSS 渐变允许任意数量的停止点，这里提供四个取色器，两色、三色或四色渐变都能生成。
问：渐变会导出成图片吗？ 答：不会。输出是纯 CSS，文字仍然可以选中、可搜索，任意缩放下都清晰。
你的数据留在这台设备上
文字渐变生成器 完全在本地运行。你粘贴或拖入的一切都由你自己的浏览器处理，不会被传走。我们的服务器不保存任何东西——关掉标签页就没了。
你输入的内容不会发往服务器、不被记录，也不用于分析统计。首次加载之后即使断网，这个页面照样能用。