CSS 渐变生成器

选择 linear(线性)、radial(径向)或 conic(锥形)渐变类型,设置角度、形状、位置关键字与多个色标,实时预览渐变效果并生成可直接使用的 background 代码,一键复制到你的样式表中。

渐变参数 已就绪
类型
色标(至少 2 个,按位置自动排序)

径向与锥形渐变使用「形状 / 位置」,线性与锥形渐变使用「角度」。位置百分比 0–100,色标会按位置升序排列。

预览与代码
色标数—
类型—
角度—
渐变预览
配置参数后点击「生成渐变」,background 代码将显示在这里。

生成的 CSS 可直接粘贴到样式表或行内 style 中。

生成规则
  • 线性:linear-gradient(90deg, #a 0%, #b 100%),角度使用 deg,0deg 指向上方,顺时针递增。
  • 径向:radial-gradient(circle at center, ...),形状取 circle 或 ellipse。
  • 锥形:conic-gradient(from 0deg at center, ...),from 指定起始角度。
  • 色标写法为 颜色 位置%,位置百分比在 0–100 之间,多个色标用逗号分隔。
  • 生成结果包含 background-color 兜底与 background-image 渐变,语法符合 CSS Images 规范。
  • 全部在浏览器本地生成,不发起任何网络请求。