已复制

CSS 渐变生成器

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

90deg
颜色色标
CSS 代码
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
使用说明
选择渐变类型
支持三种 CSS 渐变类型:Linear(线性)——沿直线渐变;Radial(径向)——从中心向外渐变;Conic(锥形)——围绕中心点旋转渐变。切换类型后预览和代码实时更新。
调节颜色色标
每个色标可设置颜色(点击色块打开取色器)和位置百分比。使用底部的渐变条可以拖拽色标来调整位置。至少需要 2 个色标,支持添加多个色标。
角度/方向
对于线性渐变,通过角度滑块调节渐变方向(0°=上,90°=右,180°=下)。锥形渐变也支持角度起始点调节。
复制 CSS 代码
面板底部实时展示生成的 CSS 代码,点击「复制代码」即可复制 background 属性到剪贴板,可直接粘贴到你的 CSS 文件中使用。