使用说明
Generated by AI
CSS 渐变
提供 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 代码类型



