已复制

CSS 渐变生成器

可视化拖拽编辑 CSS 渐变,实时预览效果

90deg
颜色色标
CSS 代码
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
使用说明
选择渐变类型

支持三种 CSS 渐变类型:Linear(线性)——沿直线渐变;Radial(径向)——从中心向外渐变;Conic(锥形)——围绕中心点旋转渐变。切换类型后预览和代码实时更新,也可使用 CSS 阴影生成器 工具。

调节颜色色标

每个色标可设置颜色(点击色块打开取色器)和位置百分比。使用底部的渐变条可以拖拽色标来调整位置。至少需要 2 个色标,支持添加多个色标,可配合 CSS 圆角生成器 工具一起使用。

角度/方向

对于线性渐变,通过角度滑块调节渐变方向(0°=上,90°=右,180°=下)。锥形渐变也支持角度起始点调节,也可使用 CSS 毛玻璃 工具。

复制 CSS 代码

面板底部实时展示生成的 CSS 代码,点击「复制代码」即可复制 background 属性到剪贴板,可直接粘贴到你的 CSS 文件中使用。