渐变色生成器
在线 CSS 渐变生成工具，创建线性渐变、径向渐变，可视化调整并一键复制代码
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);什么是 CSS 渐变？
渐变工具用于生成可直接用于网页和界面的 CSS 色彩渐变，例如背景、按钮、卡片、图表和设计原型。你可以调整颜色、色标位置、方向、角度和透明度，而不必手写复杂的 linear-gradient 或 radial-gradient。它适合在品牌色之间寻找自然过渡，也适合检查文字叠加后的可读性。真正有价值的渐变不只是好看，还要控制对比度、避免干扰内容，并在不同屏幕和明暗主题下保持稳定的视觉效果。
使用方法
使用方法
- 选择渐变类型：线性或径向
- 添加色标并调整每个颜色的位置
- 线性渐变可设置角度方向（0-360 度）
- 实时预览渐变效果
- 点击「复制代码」获取 CSS 代码
- 选择预设快速应用常用渐变
CSS 使用技巧
- 在渐变上放置文字时需检查对比度和可读性，好看的颜色仍可能无法满足无障碍需求。
- 在实际容器中测试生成的 CSS，因为渐变方向和色标位置在不同宽高比下观感会不同。
使用场景
技术原理
CSS 渐变是图像值而非颜色——linear-gradient()、radial-gradient() 和 conic-gradient() 解析为 <image> 标记，浏览器会在任何 background-image、mask-image 或 border-image 插槽中将其光栅化。线性形式接受一个角度（0deg 向上，90deg 向右，顺时针递增）或 'to <side>' 关键字（从盒子对角线计算），后跟逗号分隔的颜色停止点列表，可选百分比或长度位置。径向形式接受形状（circle | ellipse）、大小关键字（closest-side，farthest-corner 为默认值）和 'at <position>' 锚点。锥形形式从 'from <angle>' 开始围绕中心扫描停止点，在 Chrome 69+、Safari 12.1+ 和 Firefox 83+ 中受支持。<br /><br />颜色插值默认使用 sRGB，这在感知上是不均匀的，在蓝色和黄色等远距离色相之间会产生灰暗的中间带。CSS Color Level 4 通过 'in <colorspace>' 语法引入了显式色彩空间——'in oklch'、'in lab'、'in srgb-linear'、'in hsl longer hue'——使过渡在整个光谱中保持色彩饱和。硬色带通过给两个停止点设置相同位置（'red 50%, blue 50%'）产生，颜色提示在不插入停止点的情况下移动中点（'red, 20%, blue'）。<br /><br />当渐变需要离开 CSS 管道时，Canvas 暴露了相同的原语：CanvasRenderingContext2D.createLinearGradient(x0, y0, x1, y1)、createRadialGradient(x0, y0, r0, x1, y1, r1) 和 createConicGradient(startAngle, x, y) 返回 CanvasGradient 对象，接受 addColorStop(offset, color)，可通过 toDataURL('image/png') 导出。SVG 提供了标记等价物 <linearGradient> 和 <radialGradient>，spreadMethod 值为 'pad'（默认）、'reflect' 和 'repeat' 用于平铺行为。
- 线性形式：linear-gradient(<angle> | to <side-or-corner>, <color-stop>+)——0deg 向上，顺时针递增；'to bottom right' 按盒子尺寸计算，并非固定 135deg
- 径向形式：radial-gradient([<shape> <size>]? at <position>, <stops>)——大小关键字 closest-side、closest-corner、farthest-side、farthest-corner（默认）
- 锥形形式：conic-gradient(from <angle> at <position>, <stops>)——围绕中心扫描；Chrome 69+、Safari 12.1+、Firefox 83+
- 颜色插值：CSS Color Level 4 的 'in oklch | lab | srgb-linear | hsl shorter|longer hue' 覆盖了感知上不均匀的 sRGB 默认值，避免远距离色相间出现灰色中间带
- 硬停止点和提示：两个停止点在同一位置（'red 50%, blue 50%'）产生硬边界；单独的百分比（'red, 20%, blue'）是颜色提示，移动 50% 混合点
- Canvas API：createLinearGradient(x0,y0,x1,y1)、createRadialGradient(x0,y0,r0,x1,y1,r1)、createConicGradient(angle,x,y) 返回 CanvasGradient；addColorStop(offset, color) 后赋值给 fillStyle
- SVG 等价物：<linearGradient> 和 <radialGradient>，spreadMethod='pad'|'reflect'|'repeat' 控制渐变边界外的平铺行为
示例
简单双色渐变（135 度）
background: linear-gradient(135deg, #667eea, #764ba2);
用途: Hero 横幅、区块分隔；135 度方向带来柔和的斜向流动感多色停靠点线性渐变
background: linear-gradient(90deg, #ff6b6b 0%, #feca57 50%, #48dbfb 100%);
说明: 在固定百分比处设置三个色标，营造类似日落的渐变效果；增加更多色标可获得更丰富的过渡径向渐变（圆形）
background: radial-gradient(circle, #fff 0%, #000 100%);
用途: 暗角效果、聚光高亮；circle 形状关键字让渐变保持圆形，不受容器尺寸影响常见问题
支持生成哪些类型的渐变？
CSS 的 linear-gradient（默认）、radial-gradient 和 conic-gradient。线性渐变沿直线变化；径向渐变从中心向外扩散；圆锥渐变像饼图一样绕中心旋转。每种渐变在编辑器中都有各自的形状参数。
最多可以加多少个色标？
没有硬性上限，但超过约 10 个会让编辑变得繁琐，并使生成的 CSS 体积增大。多数美观的渐变只用 2 到 4 种颜色。工具支持沿渐变轨道拖动色标来微调位置。
支持哪些输出格式？
标准的 CSS background-image 语法，可直接粘贴到样式表。部分版本还支持导出为 PNG（按所选尺寸栅格化）、SVG（矢量），或 Tailwind CSS 的任意值语法。
为什么我的渐变出现“色带”？
颜色相近、色差较小的渐变容易出现可见色带，因为屏幕每个通道只有 256 个等级。可以叠加轻微的噪点（CSS 滤镜或 SVG 噪点叠层），或选用对比更强的端点。不同浏览器的渐变抖动效果也存在差异。
如何制作“网格”或“多方向”渐变？
CSS 没有原生的网格渐变。可以在同一个 background-image 中叠加多个带透明度的 radial-gradient（多重背景，用逗号分隔）来近似实现。本工具的“多色标”模式可能已经替你做了这件事。
支持透明度吗？
支持。色标可以使用带 alpha 的颜色（rgba 或 8 位带 alpha 的十六进制）。这样能让渐变淡入背景或叠加多个渐变。现代浏览器对色标透明度都有完整支持。
渐变是在本地生成的吗？
是的。所有处理都在浏览器中完成。生成的 CSS 只是文本，导出栅格图也使用 canvas，不会上传任何数据。