用 background-clip: text 把渐变填进文字本身 —— 实时预览,可调字号字重,一键复制带 -webkit- 前缀的跨浏览器 CSS。
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
提示:原理是把真实文字颜色设为透明 —— 如果文字看不见了,说明浏览器不支持 background-clip:text,会回退到上面的纯色。
.gradient-text {
font-size: 64px;
font-weight: 800;
color: #8b5cf6; /* fallback for no background-clip support */
background: linear-gradient(90deg, #8b5cf6 0%, #06e6d7 50%, #ff4dd2 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}这个工具能做什么
一个专做"文字渐变"的生成器 —— 注意,不是渐变背景。这俩差别 很关键:背景渐变是铺在内容后面的一块底色,文字渐变是让颜色 流进字形(glyph)里面。实现靠三行容易踩坑的组合:先把渐变画 在元素背景上,再用 `background-clip: text` 把这块背景裁成文字 形状,最后用 `-webkit-text-fill-color: transparent` 把真实字 的填充色设为透明,让裁好的渐变透出来。任意一行写错,文字就 整个消失。 这个工具把整套代码替你拼好。输入标题文字,选线性 / 径向 / 圆锥,按需要加色标,拖角度。预览面板用你设的字号(12–160px) 和字重(300–900)在棋盘格底色上渲染真实的裁字效果,所见即 所得 —— 连某个色标太浅读不清都看得出来。输出面板按正确顺序 给出生产级 CSS:先是纯色 `color` 兜底(不支持裁剪的浏览器也 能显示可读文字),再是渐变,再是 `-webkit-` 和标准两行 `background-clip: text`,最后才是透明填充。一键复制。文字和 渐变会写进 URL,分享链接能还原同一个设计;字号字重存在 localStorage 里,记得住但不会把链接撑长。整个过程在浏览器 本地完成 —— 不上传、不追踪、不需要注册。适合做 Hero 大标题、 Logo 文字、价格数字、栏目小标、行动号召按钮文案。
工具细节
- 输入
- 文件 + 数值 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 9 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS 文字渐变生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
不用大图也能做出抓眼的 Hero 大标题
落地页首屏要视觉冲击力,但你不想用一张大背景图把 LCP 拖垮。 第一步:在文字框输入标题("更快上线")。第二步:加载极光 预设,把角度调到 90° 让渐变在字上从左到右扫过。第三步: 字号拉到 ~96px,字重 800。第四步:复制 CSS 贴到你的 `h1` 上,你就得到一个 GPU 开销极低、完全可选中、可被 SEO 索引、 看起来很高级的标题 —— 零图片字节。
用纯 CSS 做一个单词 Logo / 文字标
用渐变写的文字标("Toolora")是你能上的最便宜的 Logo —— 缩放完美、加载零成本、改色就一行。输入品牌名,选两个品牌 色色标,设 45° 角做一个低调的对角扫光,字重拉到 900。把 CSS 复制进你的页眉组件。因为字形仍是真实文字,这个文字标 照样能被屏幕阅读器和搜索引擎读到,这是 SVG 塞 img 的 Logo 做不到的。
把价格数字高亮出来抓视线
价格页上,金额是你最想让人第一眼扫到的东西。只把数字 ("¥199")放进框里,给它一个暖调的鎏金预设,字号放大,卡片 其余部分保持纯色。渐变不加徽章不加边框就造出了视觉焦点。 把 CSS 复制到包住数字的 `<span>` 上 —— 旁边的"/月"保持 普通颜色形成对比。
给栏目小标加一点点渐变
栏目小标(标题上方那行小号大写字,比如"我们做什么")用纯 灰色显得很普通。小字号上加一个低对比的双色渐变,能加质感 又不喧宾夺主。输入小标文字,选两个色相相近的色标(比如两 种蓝),字号保持在 14–16px,复制。这个效果是"感觉到"而不 是"看出来"的 —— 对一个辅助性标签来说恰到好处。
给行动号召链接做出"可点"的感觉
行内 CTA 文字("免费开始 →")配上渐变能传达"这是个动作"。 输入 CTA,选一对高能量的双色色标,设一个水平角度把视线往 右拉向箭头,复制。配上这个工具输出的纯色兜底,链接在 hover 态和不支持裁剪的浏览器里都保持可读 —— 对一个本就 是让人点的元素来说很重要。
常见踩坑
漏写 `-webkit-text-fill-color: transparent`(或 `color: transparent`)。 少了它,纯色字形填充会盖在渐变上面,你只看到一块纯色文字 —— 渐变其实在, 但被不透明的字挡住了。带前缀的 background-clip 和透明填充两个都得有。
把透明覆盖放在了纯色兜底前面。如果 `color: transparent` 在前、而你唯一的 `color` 就是透明,那不支持裁剪的引擎会显示隐形文字。永远先声明一个真实纯色, 再放渐变和透明覆盖 —— 这就是本工具的输出顺序。
用了太浅、读不清的渐变。因为最浅的色标会成为可见文字的一部分,白底上放一个 接近白色的色标,会让那部分字母直接消失,哪怕别的都对。务必在真实字号下看预览, 并让纯色兜底本身就够深、能单独过对比度。
隐私说明
所有逻辑都是浏览器标签页里跑的纯 JavaScript:渐变字符串拼装、 带前缀的 CSS 组装、实时裁字预览。你的标题文字和色标不发到任何 服务器,也不记录你生成了什么。一个隐私提醒:分享链接会把文字 和渐变写进 URL 的 query string,这样链接能还原同一个设计 —— 也就是说对方的服务器日志(Slack、邮件)会留下这段文字。普通 营销标题无所谓;但如果是还没公布的产品名或保密文案,请手动 复制 CSS,别分享 URL。字号和字重只存在你浏览器的 localStorage 里,绝不写进链接。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。