CSS 渐变生成器
可视化创建 CSS 线性和径向渐变，一键复制 CSS 背景代码。
#6366f10%
#ec4899100%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);How to Use
- 选择渐变类型——线性（可指定角度，从上到下、从左到右或任意角度）或径向（从中心向外辐射的圆形渐变）。使用颜色选择器选好起始色和结束色。
- 通过角度滑块（线性渐变）精细调整效果。点击 + Add Stop 可添加中间色标，拖动位置滑块精确控制每个颜色的百分比位置，实现多色渐变。
- 点击 Copy CSS 一键复制生成的 CSS 背景代码，直接粘贴到你的样式表中即可使用。
Frequently Asked Questions
- 线性渐变和径向渐变有什么区别？
- 线性渐变沿指定方向的直线过渡颜色（从上到下、从左到右或任意角度）。径向渐变从中心点向外以圆形或椭圆形辐射过渡颜色。线性渐变适合页头和横幅，径向渐变适用于聚光灯效果和徽章。
- 可以创建超过两种颜色的渐变吗？
- 可以——按需添加任意数量的色标，每个色标可精确定位在渐变线上的百分比位置，从而实现彩虹渐变、日落效果或带有锐利/柔和过渡的品牌色板。
- CSS 渐变在所有浏览器中都支持吗？
- CSS 渐变在所有现代浏览器（Chrome、Firefox、Safari、Edge）中均受支持。生成的代码使用覆盖全球 98% 以上浏览器使用量的标准语法。对于极老旧的浏览器，可设置一个纯色的 fallback 背景色。