CSS 渐变文字生成器，免费

使用方法

1. 选择您的颜色：使用取色器为渐变选择两种或更多颜色。
2. 调整角度和样式：选择线性或径向渐变，调整角度，并可选地添加色标位置。
3. 复制 CSS：生成的 CSS 代码使用 background-clip: text 和 -webkit-background-clip: text 实现渐变文字效果 · 直接复制到您的样式表中。

为什么使用渐变文字生成器？

渐变文字是现代最受欢迎的 CSS 效果之一，常用于标题、logo 和行动号召文字。要实现它需要特定的 CSS 属性组合（background、background-clip、-webkit-text-fill-color），很容易出错。此生成器自动处理跨浏览器语法，并提供实时预览，让您在写任何代码之前就能调整好渐变效果。

功能特性

• 多重色标：添加任意数量的色标以创建复杂的渐变效果。
• 线性与径向：在方向性线性渐变和中心径向渐变之间选择。
• 角度控制：通过可视化刻度盘将渐变角度从 0° 调至 360°。
• 实时预览：以您的示例文字实时查看渐变文字的更新。
• 跨浏览器 CSS：输出包含 -webkit 前缀和回退，以获得最大兼容性。

常见问题

CSS 渐变文字是如何工作的？

CSS 渐变文字的原理是在元素背景上应用渐变，然后用 background-clip: text 将该背景裁剪为文字形状，并用 -webkit-text-fill-color: transparent（或 color: transparent）让文字颜色透明。这样只有被裁剪为文字形状的渐变部分可见。

渐变文字在所有浏览器都能用吗？

CSS 渐变文字在所有现代浏览器 · Chrome、Firefox、Safari 和 Edge · 都能使用。-webkit-background-clip: text 属性支持良好。对于非常旧的浏览器，始终通过 color 属性提供纯色回退。

可以在任意字号下使用吗？

可以。渐变文字可完美缩放到任何字号 · 它是纯 CSS，不是图像，因此在任何分辨率下（包括高密度显示屏）都保持清晰。

Web上渐变文本的简史

渐变文本通过WebKit的-webkit-background-clip: text属性在web上视觉化成为可能，这是WebKit团队于2008年提出的实验性Safari/Chromium扩展，作为一种用任意背景（渐变、图像或任何东西）填充文本字形形状的方式。该技术多年来一直处于非官方状态：Firefox直到第49版（2016年9月）才发布无前缀的background-clip: text，而CSS Backgrounds Module Level 4从大约2018年开始将其形式化为W3C工作草案。底层的渐变语法是单独成熟的。CSS Images Module Level 3（W3C推荐标准2017）将linear-gradient()和radial-gradient()标准化为一等图像值；conic-gradient()在Module Level 4中跟进（Chrome 69 2018年9月，Safari 12.1 2019年3月，Firefox 83 2020年11月）。这两个规范的组合使得今天的一行渐变标题成为可能。当Tailwind CSS在v1.4（2020）中发布其bg-clip-text实用工具类时，开发者社区的采用爆炸式增长，使渐变标题成为一个即插即用的原语。现代品牌识别现在依赖渐变文本作为视觉签名：Stripe的「Bridges」英雄区、Linear的渐变标志、Vercel的着陆页、Apple的WWDC营销和Notion的模板商店都使用这种技术。组合的background-clip: text + 渐变模式有效地取代了主导2005-2015年web设计的「PNG风格化标题」，一举消除了一类可访问性和性能问题。

CSS渐变文本的解剖学

• 渐变本身。background-image: linear-gradient(90deg, #f00, #00f)将元素的背景设置为从红色到蓝色的90度渐变。渐变可以是线性的（定向）、径向的（居中）、圆锥形的（旋转扫描），或任何重复变体。CSS渐变是图像值，而不是颜色值，这就是使它们可裁剪到文本形状的原因。
• background-clip: text。告诉浏览器仅在渲染的字形几何形状内呈现背景。没有这个单一属性，渐变会填满整个元素框；有了它，渐变就被限制在文本轮廓上。最初是WebKit扩展，前缀为-webkit-background-clip: text，现在在Firefox 49+（2016）和基于Chromium的浏览器中也无前缀。
• color: transparent或-webkit-text-fill-color: transparent。一旦背景被裁剪到文本，可见结果仍然取决于文本自身在背景上绘制的颜色。设置color: transparent（或带前缀的-webkit-text-fill-color: transparent）让渐变透出来。没有这个，纯色文本颜色就会简单地涂抹在裁剪的渐变之上。
• -webkit-前缀链。Safari是积累前缀历史最多的平台，它仍然解析无前缀的属性，但出于遗留原因，前缀版本仍保留在生产代码中。此生成器的输出同时包含background-clip: text和-webkit-background-clip: text，因此该技术可以追溯到Safari 14及任何基于WebKit的遗留浏览器。
• 渐变类型和停止点。linear-gradient(angle, color1, color2, ...)沿一个方向走；radial-gradient(shape at position, ...)从一个点发散；conic-gradient(from angle at position, ...)像时钟指针一样扫描一周。每个都接受任意多个颜色停止点，可以使用显式位置（red 0%, blue 50%, green 100%）精细控制每种颜色的开始和结束位置。

渐变文本的实际使用模式

• 品牌识别标题。Stripe的「Bridges」系列、Linear的产品英雄区、Vercel的「Develop. Preview. Ship.」横幅都使用渐变文本作为品牌签名。对早期SaaS来说，单色字标显得过时，而渐变标题携带「2024年构建」的视觉提示。
• 英雄区标题。着陆页上的H1通常是设计预算最高的单一文本元素。渐变文本赋予它视觉权重，而无需诉诸自定义字体文件、SVG或英雄图像，所有这些都会增加页面重量和可访问性问题。
• 大数字指标页面。定价页面（「$0开始」）、统计标注（「10×更快」）和仪表板摘要使用渐变文本来吸引视线到数字本身。渐变有效地取代了旧设计中「数字后面的彩色圆圈」模式。
• 行动号召按钮。CTA文本上的微妙渐变（而不是按钮背景）感觉比纯色更精致，并且与玻璃态或新拟物按钮表面搭配良好。该技术在金融科技和设计工具品牌中很常见。
• 导航高亮。导航链接上的激活或悬停状态可以使用渐变文本提供视觉反馈，而无需添加下划线或背景颜色变化。这种模式在文档站点中大量使用（Stripe Docs、Tailwind Docs）。
• 深色模式和品牌桥接设计。渐变文本在深色背景上特别有效，因为饱和的颜色不会与忙碌的浅色表面竞争而突出。许多产品在浅色模式下保留纯色标题，在深色模式下切换到渐变（使用CSS变量交换）。
• 电子商务产品标注。「促销」、「新品」、「限量版」徽章和产品副标题使用渐变文本将自己与正文区分开来，而无需图标资产。Shopify的店面编辑器在2024年将渐变文本作为内置选项。

可访问性考虑

• WCAG 2.1 SC 1.4.3对比度（最小）。成功标准要求普通文本与背景之间至少4.5:1的对比度（大文本为3:1，定义为18pt+或14pt粗体）。渐变文本更难评估，因为对比度比例在渐变中变化。安全方法：确保您渐变中最浅的颜色仍能满足与背景的比率。像WebAIM Contrast Checker和Figma中的Stark这样的工具可以提供帮助。
• 首先选择最深的渐变颜色。将渐变与浅色背景配对时，选择渐变中最浅的颜色来清除4.5:1比率，可以保证渐变的其余部分也是可访问的。深色背景反之亦然。WCAG 2.2（2023年10月推荐）收紧了视觉呈现指南，包括文本对比度在整个段落中变化的情况。
• 屏幕阅读器看到文本不变。因为渐变纯粹是视觉样式（background-clip、color），辅助技术读取渲染的文本内容，无论它是如何着色的。与栅格化图像文本或SVG-text-without-a-text-element不同，渐变文本没有「替代文本」问题。
• prefers-reduced-motion。动画渐变（background-position过渡、颜色循环动画）应该用@media (prefers-reduced-motion: no-preference)包装，以便患有前庭障碍或运动敏感的用户看到静态渐变。CSS Working Group在2017年添加了媒体查询；浏览器支持自2020年以来一直是普遍的。
• 浏览器缩放和调整文本大小。WCAG 2.1 SC 1.4.4要求文本可调整大小至200%而不丢失内容。渐变文本完美缩放，因为它纯粹是CSS渲染的（无栅格化）。使用Ctrl+/Cmd+缩放的低视力用户将看到渐变在任何缩放级别保持清晰。
• 打印样式表。大多数浏览器在打印时会丢弃背景剪裁的颜色，因为打印页面期望墨水在纸上，而渐变背景消失了。始终提供一个@media print覆盖，在渐变文本上设置纯色color，以便打印的副本仍然可读。许多设计师忘记这一点；打印渐变标题经常产生不可见的文本。
• 回退颜色链。始终首先设置一个纯色color属性，然后添加color: transparent（或-webkit-text-fill-color: transparent），以便不支持background-clip: text的浏览器（遗留IE、非常旧的Android浏览器）仍能看到纯色文本而不是不可见文本。生成器的输出默认包含此回退。

更多常见问题

为什么渐变文本被认为是现代品牌签名？

两个原因。首先是技术原因：渐变文本直到2017-2020年左右才完全跨浏览器兼容，所以使用它的设计明显地带有「最近构建」的视觉提示，就像flat design说「2013」或拟物化说「2010」一样。其次是文化原因：Stripe、Linear、Vercel和Apple WWDC在2020-2024年金融科技和开发者工具营销浪潮中将渐变文本作为品牌识别元素普及开来。采用相同的视觉语言表明属于该设计血统。

如何为渐变文本效果设置动画？

最常见的技术是在超大渐变上动画化background-position。设置background-size: 200% 200%并将background-position从0% 0%动画化到100% 100%，循环时长3-5秒。始终将关键帧包装在@media (prefers-reduced-motion: no-preference)中，以便运动敏感的用户看到静态版本。避免直接动画化单个颜色停止：CSS当前无法在浏览器之间平滑插值渐变值，尽管CSS @property（W3C候选推荐2022）开始启用此功能。

搜索引擎和屏幕阅读器能看到渐变文本吗？

是的。渐变文本是纯HTML文本，用CSS样式化；DOM仍然包含实际字符。Google、Bing、屏幕阅读器（NVDA、JAWS、VoiceOver）和任何文本提取工具都将内容读取为普通纯色文本。这是CSS渐变文本取代旧的「PNG风格化标题」模式的主要原因之一：这些图像在没有手动替代文本的情况下对搜索和屏幕阅读器是不可见的。

渐变文本在HTML电子邮件中有效吗？

大多数情况下不行。Outlook桌面（Word渲染引擎）会剥离background-clip；Gmail的Web客户端的支持不一致；Apple Mail和现代Gmail移动客户端通常正确渲染。对于电子邮件营销活动，更安全的方法是提供一个备用纯色标题，并将渐变文本视为支持它的客户端的「渐进增强」。一些团队预先将标题合成为带有替代文本的PNG/SVG，并接受可访问性的权衡。

在文本渐变中哪些颜色搭配效果最好？

三种模式占主导地位。类似色（色轮上相邻的颜色，例如蓝色 → 紫色 → 粉色）给出平滑、品牌友好的结果，是大多数现代设计系统的默认设置。互补色（色轮上相对的颜色，例如蓝色 → 橙色）产生强烈对比，但在长文本中可能显得花哨。品牌色调（您的主要品牌颜色，带有微妙的明度/饱和度变化）产生一种感觉融合而不是装饰性的精致效果。避免在单个标题中混合三种以上的颜色；复杂的渐变最好保留给图标和图形元素。