CSS 渐变生成器 — 线性、径向和锥形渐变，实时预览
通过可拖动的色标、角度转盘和预设创建线性、径向和锥形渐变。可复制 CSS 或 Tailwind 类名。
background: #54a5d8; background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 55%, #a7f3d0 100%);
bg-[linear-gradient(135deg,#4f46e5_0%,#06b6d4_55%,#a7f3d0_100%)]
第一行是纯色回退（各色标的平均色），供会忽略渐变的邮件客户端和非常老旧的浏览器使用。
完全在你的浏览器中运行。你输入的任何内容都不会发送给我们，也不会被保存。 浏览全部免费工具.
发现问题，或者觉得哪里可以更好？每条消息我们都会阅读，并尽快修复。
这款免费的 CSS 渐变生成器可以可视化地创建线性、径向和锥形渐变，并给出可直接粘贴的 CSS。沿色条拖动色标，点击色条添加更多色标，设置每个色标的不透明度，转动角度转盘，预览会随之实时更新。输出包含纯色回退色和 Tailwind 任意值类名，无论是纯 CSS、组件库还是原子化 CSS 代码库都能直接使用。
渐变就是纯 CSS 图像，因此不产生网络请求，可以缩放到任意尺寸而不模糊，还能叠加在照片或其他渐变之上。它们也暗藏一些陷阱：两种高饱和度互补色之间的渐变，中间会经过一段浑浊的灰色；渐变上的文字必须在最亮处也满足对比度要求。下面的说明涵盖了语法、这些陷阱，以及如何用重复渐变制作条纹。
使用方法
- 选择“线性”“径向”或“锥形”；如果希望图案平铺，请勾选“重复”。
- 点击色条上的色标将其选中，然后在下方修改颜色、位置和不透明度。点击色条上的空白处可添加色标；按 Delete 键删除选中的色标。
- 用角度转盘（拖动或使用方向键）或快捷角度按钮设置方向。对于径向和锥形渐变，还要设置中心点。
- 也可以从预设开始再进行调整。
- 复制 CSS（含回退行）或 Tailwind 类名。
常见问题
如何用 CSS 制作渐变？
把渐变函数用作背景图像：background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%); 第一个参数是方向（角度，或 to right 之类的关键字），后面是色标，每个色标是一个颜色加上可选的位置。radial-gradient() 从一点向外扩散，conic-gradient() 绕一点旋转。渐变是图像，所以要写在 background 或 background-image 中，而不是 background-color。
linear-gradient 中的角度是什么意思？
它是渐变前进的方向，从顶部开始顺时针测量：0deg 从下到上，90deg 从左到右，180deg 从上到下（省略时的默认值），270deg 从右到左。这与数学中 0 度指向右方的约定不同，这也是为什么某些设计工具导出的渐变会出现旋转。
线性、径向和锥形渐变有什么区别？
线性渐变沿直线改变颜色。径向渐变从中心点向外以圆形或椭圆形改变颜色，其尺寸关键字（closest-side、farthest-corner 等）决定最后一个色标落在哪里。锥形渐变像时钟指针一样绕中心点改变颜色，适合制作饼图、色轮和加载动画。
如何用 CSS 渐变制作条纹？
把两个色标放在同一位置，就能得到硬边而不是过渡，然后重复这个图案。例如 repeating-linear-gradient(45deg, #244b3f 0 10px, #e8f0ec 10px 20px) 会生成 10px 宽的斜条纹。这里的“条纹”预设用百分比实现了同样的效果。在重复渐变中，第一个和最后一个色标之间的距离就是一次重复的长度。
如何在 Tailwind CSS 中使用渐变？
简单的两色或三色线性渐变用 Tailwind 的工具类即可，例如 bg-gradient-to-r from-indigo-600 to-cyan-500（Tailwind v4 中为 bg-linear-to-r）。其他情况——指定角度、径向或锥形渐变、带不透明度的色标——请使用任意值：即这里生成的类名，例如 bg-[linear-gradient(135deg,#4f46e5_0%,#06b6d4_55%)]，其中下划线代替空格。很长的任意值难以阅读，可以考虑把它们移到主题配置中。
为什么我的渐变中间看起来浑浊或发灰？
浏览器默认在 sRGB 空间中插值渐变，两种高饱和度、近乎相反的颜色（蓝到黄、红到绿）之间的直线会经过低饱和度的灰色。可以添加一个颜色干净的中间色标，或者在新版浏览器中改用感知色彩空间插值：linear-gradient(90deg in oklch, blue, yellow)。长而细微的渐变出现色带是另一个问题，由 8 位色深导致；在渐变上叠加一点噪点纹理即可掩盖。
渐变语法速查
• linear-gradient(angle, stop, stop, ...)：角度单位为 deg 或 turn，或使用 to right、to bottom left 等关键字。默认 180deg（从上到下）。
• radial-gradient(shape size at x y, stops)：shape 为 circle 或 ellipse（默认 ellipse）；size 为 closest-side、closest-corner、farthest-side 或 farthest-corner（默认），或明确的长度；位置默认为 center。
• conic-gradient(from angle at x y, stops)：色标按度数或百分比沿圆周定位。把第一个颜色重复作为最后一个色标，就能得到无缝的色轮。
• repeating-*-gradient()：语法相同；色标会在元素范围内不断重复。
• 色标：一个颜色后跟零个、一个或两个位置。两个位置（red 20% 40%）会形成一段纯色带。在两个色标之间单独写一个位置（red, 30%, blue）会移动过渡的中点。
• 透明度：使用 rgba() 或 8 位十六进制色标。渐隐到透明时要用同一颜色的透明版本，即 rgba(0,0,0,0)，而不是关键字 transparent——在旧浏览器中它表示透明黑色，会让浅色渐变发灰。
渐变上的文字：保持可读性
渐变上的对比度取决于其最差的那个点。请在对比度检查工具中，用文字颜色对照最亮的色标（深色文字）或最暗的色标（浅色文字）进行检查，而不是对照平均值。
对于照片上的文字，标准做法是叠加一层深色渐变：把 linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%) 叠在图片上（即“渐隐到透明”预设），只压暗通常放置说明文字的底部。在背景列表中把它放在最前面：background: linear-gradient(...), url(photo.jpg)。
生成的 CSS 中的纯色回退对 HTML 邮件很重要，许多邮件客户端（尤其是 Windows 上的 Outlook）会完全忽略渐变。没有回退色，白色文字可能会落在白色背景上。
相关免费工具
- Box Shadow 阴影生成器 — 实时预览设计多层 box-shadow 和 text-shadow 效果，提供层级、新拟态和发光预设，一键复制 CSS。
- 配色方案生成器 — 按空格键生成新配色，锁定喜欢的颜色，选择色彩搭配规则，或从照片中提取配色。可导出为 CSS、Tailwind、SCSS、JSON 或 PNG。
- 对比度检查器 — 按 WCAG 2.x AA 和 AAA 标准检查文字与背景颜色，查看 APCA Lc 值，并获取最接近的达标颜色。
- 取色器与颜色转换 — 从屏幕任意位置吸取颜色，或在 HEX、RGB 和 HSL 之间即时转换。
- particles.js 在线调试器 — 用控件或原始 JSON 编辑 particles.js 配置，实时查看运行效果，并复制 JSON 或可直接粘贴的 HTML 代码片段。