CSS 渐变生成器

📖 使用说明

CSS渐变生成器帮助您可视化创建线性渐变和径向渐变。添加多个色标节点、调整颜色和位置、选择渐变角度，实时预览效果后一键复制CSS代码。

线性渐变 vs 径向渐变

线性渐变 (linear-gradient)：颜色沿直线方向过渡，通过角度（0-360deg）控制方向。0deg=上→下，90deg=左→右。

径向渐变 (radial-gradient)：颜色从中心向四周辐射过渡，默认椭圆形。

❓ 常见问题

浏览器兼容性如何？

CSS渐变（linear-gradient和radial-gradient）在所有现代浏览器中均支持。IE10+也已支持。本工具生成的代码包含标准语法。

如何实现多色渐变？

点击"添加色标"可增加颜色节点，每个节点可设置不同的颜色和位置百分比。至少需要2个色标才能形成渐变效果。

渐变可以用在哪些CSS属性中？

主要用于 background / background-image 属性，也可用于 border-image、mask-image 等高级CSS属性。