CSS 渐变生成器

CSS 渐变是浏览器自己绘制的图像，因此在任何尺寸下都保持清晰，也不需要下载。本生成器根据你的色标写出线性、径向和锥形渐变，支持重复条纹，以及能避免中间发灰发浑的新式 CSS Color 4 插值（in oklch、in oklab），并用你自己的浏览器按你要复制的 CSS 原样渲染出实时预览。

使用方法

1. 选一个预设，或保持“自定义”，每行输入一个色标：颜色加可选的位置。
2. 选择线性、径向或锥形，再设置角度或中心。
3. 需要条纹时勾选“重复渐变”，也可以选择插值方式。
4. 复制 CSS 代码块并粘贴到样式表中；预览显示的正是它绘制出的效果。

计算公式

linear-gradient(<angle> [in <space>], <color> <pos>, …) · radial-gradient(<shape> at <position>, …) · conic-gradient(from <angle> at <position>, …)

角度遵循 CSS 约定：0deg 朝上，90deg 朝右。带两个位置的色标（red 10px 20px）会形成硬边色带。不写位置时，浏览器会把色标均匀分布。

示例

默认色标 #ff7e5f 0% 和 #feb47b 100% 在 90° 时得到 background-image: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%); —— 左侧珊瑚色渐变到右侧蜜桃色 —— 并附带 background-color: #ff7e5f; 作为备用行。