CSS Gradient Builder

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
%
%
90°
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand CSS Gradient Builder

由色标构建线性、径向和锥形 CSS 渐变，带实时预览和可复制的 background 声明。

How it works

渐变沿一条直线绘制（线性）、由中心点向外绘制（径向），或围绕中心点绘制（锥形），每个色标被固定在该路径上的某个百分比处，色标之间的像素由插值得出。线性渐变的 CSS 角度是从「向上」起顺时针度量的，因此 0deg 由下至上、90deg 由左至右、180deg 由上至下——这与多数绘图工具所用的约定正好相反。插值默认在 sRGB 中逐通道进行，这就是蓝色与黄色的中点会变成灰色而不是绿色的原因。

When to use it

  • 不必手写色标语法，就做出首屏或区块背景
  • 构建一层柔和的双色标遮罩，好把文字安全地压在图片之上
  • 为进度环、饼图扇区或色轮创建锥形渐变
  • 当设计师只给出一个角度和两个十六进制值时，得到精确的渐变 CSS

Watch out for

  • 渐变是图像，不是颜色。它设置的是 background-image，因此 `background-color` 仍会从任何透明处透出来，并在渐变未生效时充当回退——请把两者都设置。
  • 两个互补色相之间的插值会经过灰色。请在两者之间加一个中间色相的色标，或指定诸如 `in oklch` 的插值色彩空间，以保持过渡的饱和度。
  • 大面积、低对比度的渐变会出现明显的色带。每通道 8 位无法在 1000 像素跨度内表达几乎同色的平滑过渡；请叠加一层细微噪点，或拉大颜色差距。
  • 百分比色标是相对于渐变线而非元素的，而斜向线性渐变的渐变线比元素盒子更长。除非角度是 0 度或 90 度，否则 50% 处的色标并不在元素的几何中心。

Frequently Asked Questions

如何用 CSS 做渐变背景？

在 background 属性中使用渐变函数：background: linear-gradient(135deg, #5C5BFE, #F2A03D)。第一个参数是角度（0deg 表示由下至上，90deg 表示由左至右）。圆形渐变用 radial-gradient()，角向渐变用 conic-gradient()。

如何在 CSS 中添加线性渐变？

给任意元素加上 background: linear-gradient(方向, 色标1, 色标2, ...)。方向可以是角度（45deg）或关键词（to right、to bottom right）。例如：background: linear-gradient(to right, #667eea, #764ba2)。它适用于任何块级元素。

如何使用 CSS 的线性渐变？

linear-gradient() 会沿一条直线在各色标之间平滑过渡。它适用于按钮背景、首屏区块、卡片遮罩和斜向分隔。用逗号分隔可叠加多层渐变以实现层次效果。本构建器输出的 CSS 属性可直接粘贴使用。

How to Use CSS Gradient Builder

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.