渐变生成器
直观地创建和预览 CSS 渐变。
渐变设置
设置渐变类型和方向
色标
设置渐变颜色和位置
%
%
预设
尝试预定义的渐变
预览
查看生成的渐变
生成的 CSS
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);渐变类型说明
线性渐变
沿直线方向改变颜色的渐变。您可以调整角度来设置方向。
径向渐变
从中心点向外以圆形或椭圆形改变颜色的渐变。
圆锥渐变
围绕中心点旋转时改变颜色的圆锥形渐变。
直观地创建和预览 CSS 渐变。
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);沿直线方向改变颜色的渐变。您可以调整角度来设置方向。
从中心点向外以圆形或椭圆形改变颜色的渐变。
围绕中心点旋转时改变颜色的圆锥形渐变。
直观地创建和预览 CSS 渐变。
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);沿直线方向改变颜色的渐变。您可以调整角度来设置方向。
从中心点向外以圆形或椭圆形改变颜色的渐变。
围绕中心点旋转时改变颜色的圆锥形渐变。