跳至正文

CSS渐变生成器

可视化创建CSS线性、径向、圆锥渐变并复制代码的免费在线工具。

预览

渐变类型

角度

°

颜色点

%
%

CSS 代码

background: linear-gradient(90deg, #3498db 0%, #e74c3c 100%);

预设渐变

主要功能​

  • 3种类型: 线性(linear)、径向(radial)、圆锥(conic)渐变
  • 实时预览: 立即查看更改
  • 色标: 添加最多8个色标
  • 角度控制: 设置线性/圆锥渐变角度(0-360°)
  • 位置控制: 设置每个颜色位置从0-100%
  • 预设: 6个精美的渐变预设
  • 一键复制: 立即复制CSS代码

渐变类型​

1. 线性渐变 (Linear Gradient)​

background: linear-gradient(90deg, #3498db 0%, #e74c3c 100%);
  • 颜色沿一个方向过渡
  • 通过角度指定方向(0° = 上，90° = 右，180° = 下，270° = 左)
  • 最常用的类型

使用场景:

  • 按钮背景
  • 页头背景
  • 卡片背景

2. 径向渐变 (Radial Gradient)​

background: radial-gradient(circle, #3498db 0%, #e74c3c 100%);
  • 颜色从中心向外过渡
  • 创建圆形效果
  • 适用于聚光灯效果

使用场景:

  • 背景装饰
  • 按钮悬停效果
  • Logo背景

3. 圆锥渐变 (Conic Gradient)​

background: conic-gradient(from 90deg, #3498db 0%, #e74c3c 100%);
  • 颜色围绕中心旋转过渡
  • 非常适合制作饼图和色轮
  • CSS3中添加的较新功能

使用场景:

  • 饼图
  • 进度环
  • 色轮

色标 (Color Stops)​

基本概念​

色标定义渐变中特定颜色开始或结束的位置。

/* 2种颜色 */
linear-gradient(90deg, #FF0000 0%, #0000FF 100%)

/* 3种颜色 */
linear-gradient(90deg, #FF0000 0%, #00FF00 50%, #0000FF 100%)

/* 4种颜色 */
linear-gradient(90deg, #FF0000 0%, #FFFF00 33%, #00FF00 66%, #0000FF 100%)

位置调整提示​

  • 0%: 起点
  • 50%: 中点
  • 100%: 终点
  • 重叠位置可创建急剧的颜色过渡
  • 均匀分布可创建平滑过渡

实用示例​

1. 按钮渐变​

.button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

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

2. 背景叠加​

.hero-section {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
              url('background.jpg');
  background-size: cover;
}

3. 文字渐变​

.gradient-text {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 48px;
  font-weight: bold;
}

4. 进度条​

.progress-bar {
  background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
  height: 8px;
  border-radius: 4px;
  width: 60%; /* 进度状态 */
}

5. 卡片背景​

.card {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  padding: 30px;
  border-radius: 12px;
  color: white;
}

预设渐变​

Sunset (日落)​

background: linear-gradient(90deg, #FF512F 0%, #F09819 100%);

温暖的橙红组合，充满活力

Ocean (海洋)​

background: linear-gradient(135deg, #2E3192 0%, #1BFFFF 100%);

清爽的蓝青组合，干净清新

Forest (森林)​

background: linear-gradient(90deg, #134E5E 0%, #71B280 100%);

平静的青绿组合，自然气息

Purple Dream (紫色梦幻)​

background: linear-gradient(45deg, #C471F5 0%, #FA71CD 100%);

梦幻的紫粉组合，现代时尚

Fire (火焰)​

background: radial-gradient(circle, #FDBB2D 0%, #22C1C3 100%);

径向黄青组合，动感十足

Rainbow (彩虹)​

background: linear-gradient(90deg, #FF0000 0%, #FFFF00 33%, #00FF00 66%, #0000FF 100%);

4色彩虹效果，绚丽多彩

浏览器兼容性​

Linear Gradient​

  • ✅ Chrome 26+
  • ✅ Firefox 16+
  • ✅ Safari 7+
  • ✅ Edge 12+
  • ✅ 所有移动浏览器

Radial Gradient​

  • ✅ Chrome 26+
  • ✅ Firefox 16+
  • ✅ Safari 7+
  • ✅ Edge 12+
  • ✅ 所有移动浏览器

Conic Gradient​

  • ✅ Chrome 69+
  • ✅ Firefox 83+
  • ✅ Safari 12.1+
  • ✅ Edge 79+
  • ⚠️ IE不支持

性能优化​

1. 使用will-change​

.gradient-element {
  will-change: background;
}

动画时的GPU加速

2. 复杂渐变使用图片​

非常复杂的渐变转换为图片可提高性能

3. 可重用类​

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

设计技巧​

1. 颜色选择​

  • 相似色调: 平滑过渡
  • 互补色: 强烈对比
  • 3色以下: 大多数情况下足够

2. 角度选择​

  • 90°: 从左到右(最常见)
  • 180°: 从上到下
  • 135°: 对角线(动态感)

3. 使用透明度​

background: linear-gradient(90deg,
  rgba(52, 152, 219, 0.8) 0%,
  rgba(231, 76, 60, 0.8) 100%
);

4. 动画​

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated-gradient {
  background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

可访问性考虑​

1. 对比度​

渐变上的文字需要足够的对比度(WCAG标准4.5:1)

2. 文字可读性​

/* 用文字阴影提高可读性 */
.text-on-gradient {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

3. 使用叠加​

.gradient-with-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

相关工具​