渐变生成器

设计线性、径向和锥形渐变，导出 CSS 或图片

文件不会离开你的设备
在浏览器本地运行
免费、免注册、无水印

色标

点击色条添加色标；拖动手柄移动位置，方向键微调，Delete 删除。

代码

background: linear-gradient(135deg, #4f46e5 0%, #5d45e5 3.13%, #6a44e5 6.25%, #7643e3 9.38%, #8243e1 12.5%, #8d42de 15.63%, #9742db 18.75%, #a141d6 21.88%, #ab41d1 25%, #b541cc 28.13%, #be42c6 31.25%, #c642bf 34.38%, #cf42b8 37.5%, #d743b1 40.63%, #de44a9 43.75%, #e546a1 46.88%, #ec4899 50%, #f14b90 53.13%, #f54e87 56.25%, #f8527e 59.38%, #fb5775 62.5%, #fe5b6c 65.63%, #ff6063 68.75%, #ff665a 71.88%, #ff6c51 75%, #ff7247 78.13%, #ff783e 81.25%, #ff7e35 84.38%, #ff842b 87.5%, #fd8b21 90.63%, #fb9118 93.75%, #f89810 96.88%, #f59e0b 100%);
background: linear-gradient(in oklch 135deg, #4f46e5 0%, #ec4899 50%, #f59e0b 100%);

第一行是预先计算好色标的兼容写法，供不支持 “in oklab/oklch” 的浏览器使用。

如何使用渐变生成器

制作线性、径向和锥形渐变，色标数量不限，可在 sRGB、OKLab 或 OKLCH 中混合。可复制为 CSS、Tailwind 类名或 SVG，也能下载为最大 8192 像素的 PNG、JPG 或 WebP 图片。

选择「类型」（线性、径向或锥形），设置「角度」「形状」或中心点；径向和锥形渐变可以直接在预览上拖动中心。

编辑「色标」：点击色条添加色标，拖动手柄移动位置，在列表里修改每个色标的颜色和位置。

选择「颜色混合空间」（sRGB、OKLab 或 OKLCH），也可以从「预设」或「随机」开始。

在 CSS、Tailwind 或 SVG 标签页复制代码。

需要图片时，设置「宽度」「高度」或选一个常用尺寸，选 PNG、JPG 或 WebP 格式后点下载。

常见问题

sRGB、OKLab、OKLCH 混合有什么区别？

sRGB 是传统 CSS 混合方式，互补色中间可能发灰；OKLab 在感知上均匀，中段不会浑浊；OKLCH 沿色相环过渡，颜色更鲜艳。

OKLab、OKLCH 渐变在旧浏览器里能显示吗？

CSS 输出的第一行是备用写法，用预先算好的色标兼容不支持 “in oklab/oklch” 的浏览器。SVG 代码和下载的图片也使用预先算好的色标，在哪里显示都一样。

为什么锥形渐变不能导出 SVG？

SVG 本身没有锥形渐变，请改为下载 PNG、JPG 或 WebP 图片。

可以用透明色标吗？

可以，rgba() 或 #rrggbbaa 等带透明度的颜色都能用。要保留透明请下载 PNG 或 WebP，JPG 不支持透明通道。

图片是在服务器上生成的吗？

不是。图片在浏览器的画布上绘制后直接保存，每边尺寸可在 1 到 8192 像素之间。

怎样用键盘微调色标？

选中色标手柄后，方向键每次移动 1%（按住 Shift 为 10%），Home 和 End 跳到两端，Delete 删除。渐变至少保留两个色标。