CSS 渐变生成器
可视化设计线性和径向渐变，然后复制即可使用的 CSS。所有内容在您的浏览器中实时更新。
如何制作 CSS 渐变
- 选择线性或径向，然后为线性渐变设置角度。
- 为每个断点选择颜色，并将位置设置为 0 到 100。
- 添加或删除断点，随心调整过渡效果。
- 将生成的 CSS 复制到样式表或 style 属性中。
常见问题
什么是线性渐变？
线性渐变会沿着您选择的角度（0 到 360 度）在一条直线上混合颜色。
什么是径向渐变？
径向渐变从中心点向外以圆形或椭圆形混合颜色。
位置数字是什么意思？
每个位置都是渐变过程中的一个百分比，从起点的 0% 到终点的 100%。断点会按位置自动排序。
渐变在所有浏览器中都能用吗？
可以。生成的 CSS 使用标准的 linear-gradient 和 radial-gradient 函数，所有现代浏览器都支持。
相关工具
为什么使用渐变生成器？
使用 CSS 渐变生成器可视化设计平滑的颜色过渡，而无需在代码中猜测数值，并可立即复制可直接用于生产的 CSS。
- 调整颜色、角度和断点时实时查看渐变变化。
- 复制精确、有效的 CSS，无需费力排查语法错误。
- 在几秒钟内为按钮、横幅和区块构建多断点背景。
提示与限制
您可以添加任意数量的颜色断点，生成器至少保留两个以确保渐变始终有效。在生成 CSS 前，断点会按位置排序。