CSS 渐变生成器
设计线性、径向和锥形 CSS 渐变，支持可拖动色标、角度、重复模式和 OKLCH 插值。实时预览并复制代码。
预设
渐变设置
色标
点击色条添加色标，拖动控制点移动位置。颜色支持 hex、rgb()、hsl() 或 oklch()。
预览
background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%);
相关工具
查看全部什么是 CSS 渐变生成器？
这是功能完整的 CSS 渐变编辑器，支持 linear-gradient、radial-gradient 和 conic-gradient，以及它们的重复变体和现代色彩插值（in oklab / in oklch）。色标既可以在色条上拖动，也可以精确输入，颜色可以使用十六进制、rgb()、hsl() 或 oklch()。
如何使用 CSS 渐变生成器
- 选择预设，或选择“类型”：线性、径向或锥形。
- 设置“角度”（线性）、“起始角度”（锥形），或形状、大小和中心位置（径向/锥形）。
- 编辑“色标”：点击色条添加色标，拖动手柄移动它们，或为每个色标输入颜色和位置。
- 可选地勾选“重复渐变”，并选择“插值色彩空间”（OKLab 或 OKLCH）。
- 复制 CSS 代码。
示例
Linear, angle 45°, stops #00c9ff at 0% and oklch(70% 0.2 150) at 80%, interpolation OKLCH
background: linear-gradient(45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%); background: linear-gradient(in oklch 45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%);
何时使用 CSS 渐变生成器
适合制作背景、按钮、首屏区域，以及用渐变做成的条纹或色轮。需要柔和的多点“网格”背景时，请使用网格渐变生成器；对图片做类似照片的效果，请改用 CSS 滤镜。
CSS 渐变生成器 的工作原理
色标按位置排序，写作 color position%。线性渐变使用以度为单位的角度，径向渐变使用 shape [size] at x% y%，锥形渐变使用 from angle at x% y%。点击色条会插入一个新色标，其颜色由相邻色标插值得出。选择插值空间后，工具会输出两条声明：先是普通的 sRGB 回退，然后是带 in oklch（或 in oklab）的同一渐变，这样旧浏览器仍有可用的渐变，现代浏览器则使用更平滑的感知混合。
常见用例
- 首屏和区块背景
- 渐变按钮和徽章
- 用锥形渐变制作色轮和类似饼图的视觉效果
- 用重复渐变制作条纹背景
- 用平滑的 OKLCH 渐变避免 sRGB 混合时中间发灰
常见问题
为什么使用 OKLCH 插值时有两行 background？
不理解 in oklch 的浏览器会整条丢弃该声明。第一行是它们可以使用的普通 sRGB 渐变；支持的浏览器则应用第二行。
OKLCH 插值改变了什么？
颜色在感知均匀的空间中混合，所以饱和色之间的渐变会保持鲜艳，而不会经过暗淡的灰色或浑浊的中间色。
可以使用透明度吗？
可以。使用带 alpha 值的 rgba()、hsl() 或 oklch()（例如 rgba(0, 0, 0, 0.5)）作为色标颜色。
如何制作硬边条纹？
在同一位置放两个色标（如黄色 5% 和黑色 5%），并启用“重复渐变”，就像“条纹”预设那样。