渐变生成器

CSS 渐变类型详解

线性渐变 linear-gradient

沿一条直线方向过渡颜色，用 linear-gradient(angle, color1, color2, ...) 定义。角度 0deg 表示向上，90deg 表示向右。W3C 于 CSS Image Values Level 3 规范中正式引入，是最常用的渐变类型。

径向渐变 radial-gradient

从一个中心点向外辐射扩散颜色。可指定形状为 circle（正圆）或 ellipse（椭圆），以及中心位置。适用于光晕、按钮高光等效果。

锥形渐变 conic-gradient

围绕中心点旋转渐变，类似色轮。由 Lea Verou 提出并纳入 CSS Image Values Level 4 规范，适合制作饼图、色环。

语法参考

/* 线性 */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* 径向 */
background: radial-gradient(circle at center, #00c6ff, #0072ff);

/* 锥形 */
background: conic-gradient(from 0deg at 50% 50%, red, yellow, lime, aqua, blue, magenta, red);

浏览器兼容性

性能注意事项

CSS 渐变由 GPU 合成，性能优于图片。但应避免在大量元素上使用复杂多色渐变（超过 6 个色节点）。动画渐变时，优先使用 CSS 自定义属性 + @property 注册以触发 GPU 动画，而非逐帧重写 background。

FAQ