CSS 渐变色库收录了 180 款精心搭配的线性渐变，每款均以圆形预览图展示，并提供可直接粘贴的 background-image CSS 代码。所有渐变来自 webgradients.com 开源项目，可免费用于个人和商业项目。

如何快速找到目标渐变

页面顶部提供 180 个小方块缩略图，鼠标悬停可查看渐变名称，点击后页面平滑滚动到对应卡片，适合在浏览过程中快速定位已经瞄准的渐变，不需要手动滚动整页。

每张卡片下方列出该渐变的所有组成色块，点击单个色块可单独复制十六进制颜色值，方便在其他地方使用相同颜色而不引用完整渐变。

复制后如何应用

复制的 CSS 代码格式为：

background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

将其粘贴到目标元素的样式中即可。如果需要同时设置纯色降级方案（兼容不支持渐变的旧浏览器），在 background-image 前添加一行 background: #667eea;。

修改渐变参数的常见做法

复制后的 CSS 可以直接编辑：

/* 将角度改为垂直方向 */
background-image: linear-gradient(180deg, #667eea 0%, #764ba2 100%);

/* 添加半透明度，用于图片叠加 */
background-image: linear-gradient(135deg, rgba(102,126,234,0.8) 0%, rgba(118,75,162,0.8) 100%);

/* 渐变文字效果 */
background-image: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

角度规则：0° 从下到上，90° 从左到右，135° 从左下到右上，180° 从上到下。

渐变色库与渐变编辑器的区别

本色库提供 180 款固定预设，适合快速选用现成效果；如需从头设计自定义渐变、使用多层叠加或指定 OKLCH 等现代色彩空间，可使用站内的 CSS 渐变编辑器工具进行完全自定义。