渐变生成器

直观地创建和预览 CSS 渐变。

渐变设置
设置渐变类型和方向
色标
设置渐变颜色和位置
%
%
预设
尝试预定义的渐变
预览
查看生成的渐变
生成的 CSS
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
渐变类型说明

线性渐变

沿直线方向改变颜色的渐变。您可以调整角度来设置方向。

径向渐变

从中心点向外以圆形或椭圆形改变颜色的渐变。

圆锥渐变

围绕中心点旋转时改变颜色的圆锥形渐变。

    渐变生成器