设计 CSS 渐变并复制代码
这个 CSS 渐变生成器以可视化方式创建 <code>linear-gradient()</code>、<code>radial-gradient()</code> 和 <code>conic-gradient()</code> 背景。点击色标条添加颜色，拖动到合适位置，设置每个色标的透明度，再调整角度、形状或中心，预览会实时更新。可以复制带纯色后备的 CSS、复制现成的 Tailwind 类，或将渐变导出为任意尺寸的 PNG。把样式表中的渐变粘贴进来即可在这里编辑。一切都在你的浏览器本地运行。
如何制作 CSS 渐变
- 1选择线性、径向或锥形，或从某个预设开始。
- 2点击色标条任意位置添加色标，拖动色标移动位置，在选中的色标上按 Delete 删除。方向键将选中的色标移动 1%，Shift+方向键移动 10%。
- 3为每个色标选择颜色和透明度。任何 CSS 颜色都可以：hex、
rgb()、hsl()、oklch()或颜色名称。 - 4用转盘设置角度（按住 Shift 以 15° 为步进），径向和锥形渐变可在预览上拖动以移动中心。
- 5复制 CSS 或 Tailwind 类，或设置宽度和高度后下载 PNG。
线性、径向和锥形渐变
- linear-gradient()
- 颜色沿一条有角度的直线变化。<code>0deg</code> 指向上方，<code>90deg</code> 指向右侧；关键字 <code>to right</code> 和 <code>to bottom left</code> 用文字表达同样的意思。渐变线的长度刚好让四个角得到第一个和最后一个颜色。
- radial-gradient()
- 颜色从中心以圆形或椭圆形向外扩散。尺寸关键字决定 100% 落在哪里：<code>farthest-corner</code>（默认）到达元素最远的角，<code>closest-side</code> 停在最近的边。
- conic-gradient()
- 颜色像时钟指针一样绕中心旋转，从 <code>from</code> 角度开始。利用硬边色标，无需任何图片就能画出饼图和色轮。
色标、硬边和透明度
每个色标由颜色和位置组成。两个色标之间浏览器会平滑混合；当两个色标位置相同时，颜色会突然变化，条纹、旗帜和饼图就是这样画出来的。给相邻两个色标相同的颜色，就能得到一段纯色带。
色标可以部分透明，因此渐变可以让图片淡入页面，或压暗主图底部让白色文字保持清晰。现代浏览器在预乘颜色空间中混合透明色标，所以渐变到 transparent 时中间不再发灰，但生成器仍会写出明确的 rgba() 颜色，便于阅读。
重复渐变
repeating-linear-gradient() 及其径向和锥形版本会把第一个到最后一个色标之间的图案平铺到整个元素。打开重复，把最后一个色标移到远低于 100% 的位置，例如 10%，就能得到条纹、圆环或放射光。如果最后一个色标在 100%，重复渐变看起来与普通渐变完全相同。
后备颜色、Tailwind 和 PNG 导出
渐变属于图像，所以无法绘制渐变的浏览器在文字后面什么也不会显示。可选的后备行先设置纯色 background，取所有色标的平均色，之后的渐变行会在支持渐变的地方覆盖它。
Tailwind 输出是任意值类，例如 bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)]。空格会变成下划线，因为 Tailwind 类名不能包含空格；它在 Tailwind 3 和 4 中无需任何配置即可使用。
PNG 导出会在 canvas 上按你选择的尺寸绘制同样的渐变，每边最多 8192 像素，适合壁纸、社交媒体图片或无法读取 CSS 的设计工具。用对比度检查器挑选适合文字的颜色，用颜色转换器在不同写法之间转换，或用box-shadow 生成器增加层次感。
编辑现有渐变
把渐变粘贴到导入中：单独的 linear-gradient(…)、完整的 background: 或 background-image: 声明、带 -webkit- 前缀的版本，或 Tailwind 的 bg-[…] 类都可以。像 to top right 这样的方向、以 deg、turn 或 rad 表示的角度、带两个位置的色标和没有位置的色标都能识别。像素位置和颜色提示无法在百分比条上显示，所以会做近似处理，导入时会提示你。
常见问题
- 如何在 CSS 中制作渐变背景？
- 把 background（或 background-image）设置为渐变函数，例如 background: linear-gradient(90deg, #ff7e5f, #feb47b);。这个生成器会帮你写好这一行，并可在前面加一个纯色后备。
- 线性、径向和锥形渐变有什么区别？
- 线性渐变沿直线改变颜色，径向渐变从中心以圆形或椭圆向外扩散，锥形渐变则像时钟指针一样绕中心旋转。
- 如何做出硬边或条纹？
- 把两个不同颜色的色标放在同一位置。要做重复条纹，打开重复，并把最后一个色标放在较小的值，例如 10%。
- CSS 渐变可以透明吗？
- 可以。降低色标的不透明度，生成器会把它写成 rgba()。从某种颜色渐变到透明，是让图片或遮罩淡入页面的常用方法。
- 如何在 Tailwind CSS 中使用渐变？
- 复制 Tailwind 类，即类似 bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)] 的任意值，并添加到元素上。Tailwind 自带的 from-/via-/to- 工具类只支持简单的线性渐变；任意值支持任何渐变。
- 锥形渐变在所有浏览器中都能用吗？
- conic-gradient() 在 Chrome、Edge、Firefox 和 Safari 的所有当前版本中都能使用。如果你仍需支持很旧的浏览器，请加上后备颜色。
- 可以把渐变下载为图片吗？
- 可以。输入宽度和高度后下载 PNG。图片在你的浏览器中按该尺寸精确绘制，最大 8192 × 8192 像素。
- 会上传任何内容吗？
- 不会。预览、CSS 和 PNG 导出全部在你的浏览器中生成。