CSS 渐变生成器

创建带多个色标的线性、径向和锥形 CSS 渐变，并复制代码。

预览

CSS 输出

background: —;

所有处理都在你的浏览器中完成——无需上传，无需注册。

渐变类型

角度

deg

色标点击色条添加色标，拖动可移动

选中的色标

色标颜色

不透明度 100%

位置

预设

关于 CSS 渐变生成器

CSS 渐变生成器可以构建线性、径向和锥形渐变，并提供完整的可视化控制。点击渐变条添加色标，拖动以重新定位，并为每个色标设置各自的颜色、不透明度和位置。线性渐变有角度控制；径向渐变有形状（圆形或椭圆形）和位置控制；锥形渐变有起始角度控制。

实时预览精确展示浏览器最终渲染的效果，随机生成按钮以及一组精选预设可在你需要灵感而非从空白开始时派上用场。色标可以自由添加或移除——一个渐变只需要至少两个色标。

效果满意后，可以复制单纯的渐变值，也可以复制完整的 CSS 规则。生成器完全在浏览器中运行，无需上传，也无需注册，是制作按钮、主视觉背景、边框和文字效果的便捷工具。

线性渐变沿一条直线按某个角度混合颜色。径向渐变以圆形或椭圆形从一个中心点向外发散。锥形渐变则围绕一个中心点旋转分布颜色——饼图和调色轮背后正是这种类型。

至少需要两个，实际上没有上限。两三个色标就能做出简洁的背景；紧密排列的色标则会形成清晰的色带，这也是条纹和分段效果的实现方式。

可以——每个色标都有各自的不透明度控制。将某个色标的不透明度设为 0% 就能使渐变淡出，这是把带色叠层融入照片、或让主视觉区域淡入页面背景的标准做法。

不能直接做——浏览器无法在两个渐变值之间做过渡。常见的技巧包括：在一个超大渐变上为 background-position 做动画、用自定义属性旋转锥形渐变，或让两个叠放的元素交叉淡入淡出。

是的，免费且无限制使用。它完全在你的浏览器中运行，因此你设计的内容不会被存储或传输。