131 · 设计与网页

CSS 渐变生成器

选择颜色和角度,实时查看渐变,然后复制 CSS。

您的数据: 该工具处理您在此浏览器中的输入。 CapyHelp 不会上传该输入来生成结果。 隐私详情

CSS 渐变生成器

类型
#4f46e5
#ec4899
#f59e0b

如何使用CSS渐变生成器

  1. 选择线性、径向或圆锥形。
  2. 选择两种或三种颜色并设置角度。
  3. 将 CSS 复制到样式表中。

渐变类型

  • 线性 以您选择的角度沿直线混合。
  • 径向 从中心向外展开为圆形或椭圆形。
  • 圆锥曲线 像色轮一样围绕中心扫过。

CSS 的第一行是非常旧的浏览器的纯背景色。

示例

135° 时呈靛蓝色至粉红色

背景:线性渐变(135deg,#4f46e5,#ec4899);

径向圆

背景:径向渐变(圆,...);

问题

渐变在所有浏览器中都有效吗?

线性和径向渐变适用于当前的每个浏览器。圆锥渐变也适用于当前所有主要浏览器。

自动翻译。回顾重要结果。