工作原理
选择渐变类型、角度,以及两到三种颜色和它们的位置。预览会即时更新,并提供可直接粘贴的 CSS 代码和一张 1920 × 1080 的 PNG 图片,可用于幻灯片、壁纸和社交媒体帖子。
background: linear-gradient(135deg, #2459e0 0%, #f2b33d 100%);
渐变类型
- 线性:颜色沿您设定角度的直线过渡 (0° = 从下到上,90° = 从左到右)。
- 径向:颜色从中心向外呈圆形扩散。
- 锥形:颜色像色轮或饼图一样绕中心旋转。
使用提示
- 色轮上相近的颜色比相对的颜色过渡得更平滑。
- 在渐变上放文字时,请检查两端的对比度,确保清晰可读。
- 所有现代浏览器都支持这些 CSS 渐变,无需前缀。
标准与出处
- 渐变语法遵循 CSS Images Module Level 3 和 4 (W3C)
最后核对于 2026年10月7日
常见问题
怎样制作 CSS 渐变?
选择类型,设置角度和颜色,然后把生成的“background”这一行复制到样式表中。
角度是什么意思?
对于线性渐变,0° 表示从下到上,90° 表示从左到右,180° 表示从上到下。
可以使用两种以上的颜色吗?
可以。勾选“添加中间颜色”,即可添加第三个色标并单独设置位置。
可以把渐变下载为图片吗?
可以。“下载 PNG”会保存一张 1920 × 1080 的图片,可直接用于幻灯片、壁纸或社交媒体。
这些渐变在所有浏览器中都能用吗?
线性和径向渐变到处都能用;锥形渐变适用于当前所有版本的 Chrome、Edge、Firefox 和 Safari。