跳到主要内容

CSS 渐变生成器

实时预览创建线性、径向或锥形渐变，调整颜色和色标，复制可直接粘贴的 CSS 或 Tailwind 代码。

渐变类型

角度

90°

色标 (2)

  • #2C71DE
  • #051938

点击添加 · 拖动移动

background: linear-gradient(90deg, #2C71DE 0%, #051938 100%);

现成可用的 CSS 渐变

点击任意一个即可载入编辑器，并按你的喜好调整。

什么是 CSS 渐变，它如何工作

渐变是两种或多种颜色之间的平滑过渡，通过 CSS 的 background 属性用作背景。浏览器不会绘制纯色，而是按你选择的方向或形状，在你定义的颜色之间绘制逐步的混合。

渐变中的每种颜色由一个色标定义：颜色代码，以及该颜色完全纯净的位置（百分比）。两个色标之间的过渡由浏览器自动计算。两个色标即可实现简单混合，添加更多色标可以得到层次更丰富的渐变。

线性

颜色按你设定的角度沿直线过渡。这是最常用的类型，适合方向明确的背景，如从上到下或对角线方向。

linear-gradient(90deg, #F97316, #FBBF24)

径向

颜色从中心点向外呈圆形扩散。适合聚焦、光照或纵深效果。

radial-gradient(circle, #FDE68A, #F97316 70%)

锥形

颜色围绕中心点旋转，就像时钟的指针。这是最少见的类型，适合色轮、进度指示器或更具实验性的效果。

conic-gradient(from 90deg, #F97316, #FBBF24, #14B8A6, #F97316)

如何用 CSS 编写渐变

线性渐变在 background 属性中用 linear-gradient() 函数声明。它的组成部分如下：

135deg
方向。0deg 向上，90deg 向右，180deg 向下。也可以写成 to right 或 to bottom right。
#FF5F6D
渐变中的每种颜色，可以使用任意 CSS 格式：HEX、rgb()、hsl() 或 oklch()。
0%
色标的位置：该颜色为纯色的地方。省略时，浏览器会平均分配颜色。

径向渐变使用 radial-gradient(circle, …)，锥形渐变使用 conic-gradient(from 90deg, …)，色标写法相同。

background: linear-gradient(135deg, #FF5F6D 0%, #FFC371 100%);

如何使用生成器

  1. 选择类型

    线性、径向或锥形。线性和锥形渐变可以用滑块或方向按钮调整角度。

  2. 调整颜色和色标

    选中色标可更改颜色，在条上拖动可移动它，点击条可添加新色标。最多八个色标。

  3. 复制代码

    复制 CSS 或对应的 Tailwind 类，粘贴到你的项目中。你也可以单独导出各个颜色。

让渐变更好看的技巧

  • 选用色轮上相近的颜色

    色轮上相邻的颜色能形成柔和自然的过渡。

  • 避开灰色区域

    两种对立色之间的中间部分往往发灰。加入一个更鲜艳的中间色标即可避免。

  • 色标宜少

    大多数背景两三种颜色就够了。色标太多往往不够雅致。

  • 上层文字要清晰

    检查文字与渐变中最浅和最深颜色的对比度。

常见问题

在 background 属性中使用 linear-gradient()、radial-gradient() 或 conic-gradient() 函数，指定方向和颜色。例如：background: linear-gradient(90deg, #2193B0, #6DD5ED);

它是构成渐变的每种颜色，以及该颜色呈现纯色的位置（百分比）。两个色标之间的过渡由浏览器自动计算。

线性渐变沿某个角度直线过渡。径向渐变从中心点呈圆形扩散。锥形渐变围绕中心点旋转，就像时钟的指针。

点击预览条，想加多少就加多少。两个色标得到简单过渡，更多色标可以创建多色调渐变。

可以。除了标准 CSS 代码，生成器还提供等效的 Tailwind 语法，可直接复制。

是的，linear-gradient、radial-gradient 和 conic-gradient 都是标准 CSS 属性，所有现代浏览器都支持。

把渐变应用到 body，并至少设置为窗口高度：body { min-height: 100vh; background: linear-gradient(180deg, #EE9CA7, #FFDDE1); }

无法直接对两个渐变之间的切换做动画，但可以让它移动：设置比元素更大的 background-size（例如 200%），再用 transition 或 @keyframes 为 background-position 做动画。

相关工具