渐变生成器

可视化 CSS 渐变代码生成

CSS 渐变生成器

色标 (2)
0%
100%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

关于渐变生成器

CSS渐变生成器可视化生成线性渐变和径向渐变CSS代码,支持多色节点/角度调整/透明度控制。一键生成渐变背景代码,前端设计必备。

使用方法

  1. 选择渐变类型(线性/径向)
  2. 添加颜色节点并调整位置
  3. 调整渐变角度/中心点
  4. 复制生成的CSS代码

常见问题

线性渐变和径向渐变有什么区别?
线性渐变(linear-gradient)沿直线方向过渡,适合背景/按钮。径向渐变(radial-gradient)从中心向外辐射,适合光晕/聚光灯效果。
渐变兼容性怎么样?
现代浏览器(Chrome/Firefox/Safari/Edge)全支持。IE10+支持,IE9需-ms-前缀。如需兼容更老浏览器,提供纯色fallback。
渐变能做透明效果吗?
能。使用rgba或hsla颜色格式,alpha通道控制透明度。常用于遮罩层、图片叠加效果。