免费 CSS 渐变生成器

把渐变函数用作背景，例如 background: linear-gradient(90deg, #ff6b6b 0%, #feca57 100%)。在这里你只需选择类型、角度和色标，工具就会生成这一行代码，供你复制到样式表中。

90deg 表示从左到右。0deg 是从下到上，180deg 是从上到下，270deg 是从右到左。这里的默认值是 135deg，即从左上到右下。你可以输入任意数字，包括负数。

在色标的文本框中输入透明色，例如 rgba(255,255,255,0) 表示渐隐为透明白色，rgba(0,0,0,0) 表示透明黑色。代码会按你输入的原样保留。颜色选择器无法显示透明度，会显示为黑色。

线性渐变沿着一条带角度的直线混合颜色。径向渐变从中心点向外扩散。锥形渐变像时钟指针一样围绕中心旋转扫过，适合饼图和色轮。本工具的径向渐变绘制为居中的圆形。

目前工具还不支持，因为径向输出始终是从中心开始的 radial-gradient(circle, ...)。复制之后你可以自行修改代码：把 circle 改成 ellipse，或写成 circle at 30% 20% 来移动中心。色标保持不变。

不需要。所有current浏览器都支持无前缀的线性和径向渐变，锥形渐变在 Chrome 69、Safari 12.1、Firefox 83 及更高版本中可用。本工具不会添加任何前缀，所以复制出来的那一行只是标准语法。

把两个色标放在同一位置。例如 #000000 在 50%、#ffffff 在 50%，就会得到一条清晰的分界线，而不是渐变过渡。多添加几组这样的色标就能做出条纹。代码会按位置对色标排序，位置相同的色标则保持你添加时的顺序。

没有上限。点击「添加色标」会在第一个色标和最后添加的色标之间的中点放置一个新色标，所以请把每个新色标拖到你想要的位置。你可以删除色标，直到只剩两个。

本工具输出的是普通 CSS，而不是 Tailwind 类名。你可以把渐变粘贴到任意值中，并用下划线代替空格，例如 bg-[linear-gradient(135deg,#6366f1_0%,#8b5cf6_100%)]，也可以把它作为背景图添加到你的主题中。

本工具生成的是背景渐变，但你可以把代码复用于文字。把复制的 background 那一行放到文字元素上，再添加 background-clip: text、-webkit-background-clip: text 和 color: transparent，渐变就会透过字形显示出来。

是的。它免费，无需账号，也没有使用次数限制。你的颜色和设置只保留在浏览器中，不会被保存，所以刷新页面后会重新开始。在正式网站上，Google Analytics 只统计「复制 CSS」的点击次数，不会记录渐变本身。