提供 180 个精美线性渐变的免费资源库。每个渐变都经过精心设计，配色和谐，可以直接复制 CSS 代码用于网页设计、UI 界面、背景装饰等场景。所有渐变来自 webgradients.com 项目。

功能特点

渐变预览

页面展示 180 个不同的渐变效果，每个渐变以圆形图案呈现，可以清晰看到颜色过渡和方向。渐变包含各种色调和风格：

温暖色调：红色、橙色、黄色系渐变
冷色调：蓝色、绿色、青色系渐变
中性色调：灰色、棕色、米色系渐变
鲜艳色彩：高饱和度的明亮渐变
柔和色彩：低饱和度的淡雅渐变
多色混合：3 种以上颜色的复杂渐变

快速复制

每个渐变卡片提供一键复制 CSS 代码功能，点击"复制 CSS"按钮即可将完整的 background-image 属性代码复制到剪贴板，可直接粘贴到项目中使用。

颜色提取

每个渐变下方显示组成该渐变的所有颜色色块。点击任意颜色色块可以单独复制该颜色的十六进制代码，方便在其他地方使用相同颜色。

快速导航

页面顶部提供缩略图网格，每个小方块显示对应渐变的效果。鼠标悬停查看渐变名称，点击缩略图自动滚动到该渐变，快速定位想要的效果。

使用方法

浏览渐变

打开 CSS 渐变页面
向下滚动浏览所有渐变效果
每个卡片显示：渐变名称、圆形渐变预览、组成颜色的色块、复制 CSS 按钮

快速定位

查看页面顶部的缩略图网格
鼠标悬停可以看到渐变名称
点击缩略图自动滚动到该渐变

复制 CSS 代码

找到喜欢的渐变
点击卡片右上角的"复制 CSS"
按钮文字会变为绿色，表示复制成功
粘贴到 CSS 文件或样式标签中
应用到需要渐变效果的元素

复制单个颜色

查看渐变下方的色块
点击任意一个色块
该颜色的十六进制代码会被复制
色块会显示绿色边框表示复制成功

应用场景

网页背景

为网页添加渐变背景，让页面更有层次感和视觉吸引力。可以用于页面主背景、区块背景、卡片背景、按钮背景。

使用示例：

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

UI 元素装饰

为界面元素添加渐变效果：按钮和链接的悬停效果、导航栏背景、侧边栏装饰、标签和徽章。

分隔线和边框

使用渐变创建独特的分隔线：

.divider {
  height: 2px;
  background-image: linear-gradient(90deg, #fa709a 0%, #fee140 100%);
}

文字效果

配合 CSS 属性创建渐变文字：

.gradient-text {
  background-image: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

图片叠加

在图片上叠加半透明渐变，提升可读性：

.image-overlay {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.5), transparent);
}

使用技巧

选择合适的渐变

根据用途选择

背景渐变：选择柔和、低对比度的渐变，避免干扰内容
装饰元素：可以选择鲜艳、高对比度的渐变
文字背景：确保文字颜色与渐变对比度足够，保证可读性

考虑品牌色

寻找与品牌主色调相近的渐变
提取渐变中的颜色用于其他设计元素
保持整体配色协调统一

调整渐变参数

复制的 CSS 代码可以进一步修改：

改变角度

/* 原始 */
linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)

/* 改为垂直渐变 */
linear-gradient(180deg, #a1c4fd 0%, #c2e9fb 100%)

/* 改为对角渐变 */
linear-gradient(45deg, #a1c4fd 0%, #c2e9fb 100%)

调整颜色位置

/* 将颜色过渡集中在中间 */
linear-gradient(120deg, #a1c4fd 40%, #c2e9fb 60%)

添加透明度

/* 使用 rgba 添加透明度 */
linear-gradient(120deg, rgba(161,196,253,0.8) 0%, rgba(194,233,251,0.8) 100%)

组合使用

多个渐变可以叠加使用：

.element {
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.2), transparent),
    linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}

浏览器兼容性

现代浏览器都支持 linear-gradient, 但为了更好的兼容性可以添加前缀和备用方案：

.element {
  background: #a1c4fd; /* 备用纯色背景 */
  background-image: -webkit-linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}

注意事项

所有渐变来自 webgradients.com 开源项目，可以免费用于个人和商业项目
渐变效果在不同浏览器可能略有差异，建议在主流浏览器测试
使用渐变时注意与内容的对比度，确保文字清晰可读
过度使用渐变可能使设计显得杂乱，建议适度使用
复制的 CSS 代码使用十六进制颜色值，也可以转换为 rgb 或 hsl 格式
点击复制后需要手动粘贴，确认复制成功后再关闭页面
渐变角度 0deg 为从下到上，90deg 为从左到右，以此类推
可以在浏览器开发者工具中实时调整渐变参数查看效果
深色背景上使用浅色渐变，浅色背景上使用深色渐变，效果更好
如果需要径向渐变或圆锥渐变，需要手动修改 CSS 代码类型

CSS 渐变色库