CSS 渐变生成器

可视化创建线性或径向渐变,并导出 CSS 代码。

渐变类型
角度135°
颜色控制
起始颜色
#3B82F6
结束颜色
#EF4444
CSS Output
background: linear-gradient(135deg, #3b82f6, #ef4444);
效果预览

使用说明

  • 选择“线性”或“径向”渐变类型。
  • 设置起始和结束颜色,您可以观察到中间的过渡变化。
  • 对于线性渐变,可以通过滑块调整旋转角度。
  • 满意后点击“复制渐变 CSS”按钮,将生成的样式应用到您的项目中。

CSS 渐变知识

什么是 CSS 渐变?

CSS 渐变是 `<image>` 数据类型的一个变体,允许你在背景中显示两种或多种指定颜色之间的平滑过渡。

线性 vs 径向

线性渐变沿直线平滑过渡,而径向渐变则从一个点(通常是中心)向外呈圆形或椭圆形扩散。