CSS 渐变生成器
可视化创建漂亮的 CSS 渐变。支持线性、径向和锥形渐变类型，可添加多个色标。
渐变类型
角度135deg
色标
%
%
CSS 代码
如何在线创建 CSS 渐变
- 1.选择渐变类型：线性、径向或锥形。
- 2.使用滑块调整角度（适用于线性/锥形渐变）。
- 3.添加、删除或修改色标。设置颜色值和位置百分比。
- 4.使用预设快速开始，或从头创建渐变。点击复制 CSS在项目中使用。
常见问题
线性、径向和锥形渐变有什么区别？
线性渐变沿指定角度的直线方向过渡颜色。径向渐变从中心点向外以圆形或椭圆形辐射。锥形渐变围绕中心点旋转颜色，类似色轮。
可以添加多少个色标？
你可以添加任意数量的色标。每个色标有一个颜色和一个位置百分比（0-100%）。至少需要两个色标才能创建渐变。
这些渐变在所有浏览器中都能使用吗？
是的。使用标准语法（linear-gradient、radial-gradient、conic-gradient）的 CSS 渐变在所有现代浏览器中都受支持。锥形渐变在非常旧的浏览器中可能不可用。
如何将渐变添加到网站中？
复制生成的 CSS 代码并添加到元素样式中。你可以将其用作 CSS 的 background 属性。例如：.my-element { background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%); }