CSS 渐变生成器
可视化创建线性或径向渐变,并导出 CSS 代码。
渐变类型
角度135°
颜色控制
起始颜色
#3B82F6
结束颜色
#EF4444
CSS Output
background: linear-gradient(135deg, #3b82f6, #ef4444);效果预览
使用说明
- 选择“线性”或“径向”渐变类型。
- 设置起始和结束颜色,您可以观察到中间的过渡变化。
- 对于线性渐变,可以通过滑块调整旋转角度。
- 满意后点击“复制渐变 CSS”按钮,将生成的样式应用到您的项目中。
CSS 渐变知识
什么是 CSS 渐变?
CSS 渐变是 `<image>` 数据类型的一个变体,允许你在背景中显示两种或多种指定颜色之间的平滑过渡。
线性 vs 径向
线性渐变沿直线平滑过渡,而径向渐变则从一个点(通常是中心)向外呈圆形或椭圆形扩散。