CSS 渐变：linear/radial/conic

按钮渐变、背景渐变、文字渐变、图标渐变——CSS 渐变是网页设计高频效果。本文详解三种渐变语法和工具。

CSS 渐变类型

1. linear-gradient（线性渐变）

linear-gradient(方向, 颜色1, 颜色2, ...)

颜色沿直线方向渐变。

2. radial-gradient（径向渐变）

radial-gradient(中心, 颜色1, 颜色2, ...)

颜色从中心向外辐射。

3. conic-gradient（圆锥渐变）

conic-gradient(角度, 颜色1, 颜色2, ...)

颜色绕中心点旋转。

linear-gradient 详解

基本语法

background: linear-gradient(to right, red, blue);

方向

linear-gradient(to right, ...)       /* 从左到右 */
linear-gradient(to left, ...)        /* 从右到左 */
linear-gradient(to top, ...)         /* 从下到上 */
linear-gradient(to bottom, ...)      /* 从上到下 */
linear-gradient(to top right, ...)   /* 对角 */
linear-gradient(45deg, ...)          /* 45 度角 */
linear-gradient(0deg, ...)           /* 从下到上 */
linear-gradient(90deg, ...)           /* 从左到右 */
linear-gradient(180deg, ...)         /* 从上到下 */

多色渐变

linear-gradient(red, yellow, green);
linear-gradient(red 0%, yellow 50%, green 100%);

颜色停止位置

linear-gradient(to right, red 0%, red 30%, blue 70%, blue 100%);

透明度渐变

linear-gradient(rgba(0,0,0,0.5), transparent);

重复渐变

repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);

斑马纹效果。

radial-gradient 详解

基本语法

background: radial-gradient(circle, red, blue);

形状

radial-gradient(circle, ...)        /* 圆形 */
radial-gradient(ellipse, ...)       /* 椭圆（默认） */

大小

radial-gradient(closest-side, ...)      /* 到最近边 */
radial-gradient(farthest-side, ...)      /* 到最远边 */
radial-gradient(closest-corner, ...)     /* 到最近角 */
radial-gradient(farthest-corner, ...)    /* 到最远角（默认） */

位置

radial-gradient(at center, ...)
radial-gradient(at top left, ...)
radial-gradient(at 50% 50%, ...)
radial-gradient(at 100px 100px, ...)

多色径向

radial-gradient(circle, red, yellow, green);
radial-gradient(circle at 50% 50%, rgba(255,0,0,0.5), transparent);

重复径向

repeating-radial-gradient(circle, red 0, red 10px, blue 10px, blue 20px);

同心圆效果。

conic-gradient 详解

基本语法

background: conic-gradient(red, yellow, green, red);

起始角度

conic-gradient(from 0deg, red, yellow, green, red);
conic-gradient(from 45deg at 50% 50%, red, yellow, green);

饼图效果

conic-gradient(
  red 0% 25%,
  yellow 25% 50%,
  green 50% 75%,
  blue 75% 100%
);

重复圆锥

repeating-conic-gradient(red 0% 10%, blue 10% 20%);

常见渐变效果

1. 简单双色渐变

background: linear-gradient(to right, #667eea, #764ba2);

2. 三色渐变

background: linear-gradient(135deg, #667eea, #f093fb, #4facfe);

3. 玻璃拟态背景

background: linear-gradient(135deg, 
  rgba(255,255,255,0.1), 
  rgba(255,255,255,0.3));
backdrop-filter: blur(10px);

4. 文字渐变

.text-gradient {
  background: linear-gradient(to right, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

5. 按钮渐变

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

6. 边框渐变

.border-gradient {
  border: 2px solid transparent;
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #667eea, #764ba2) border-box;
}

7. 阴影渐变

.shadow {
  background: white;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.5);
}

8. 暗色渐变

.dark-gradient {
  background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
}

9. 透明渐变（叠加）

.overlay {
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));
}

10. 网格背景

.grid-bg {
  background: 
    linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

52tool CSS 渐变生成器

工具地址：CSS 渐变生成器

功能

• 三种渐变（linear/radial/conic）
• 颜色选择器
• 自定义角度、位置
• 多色渐变
• 实时预览
• 一键复制 CSS
• 浏览器端运行

实战 1：生成按钮渐变

类型：linear
方向：135deg
颜色 1：#667eea
颜色 2：#764ba2

输出 CSS：

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

实战 2：径向光晕

类型：radial
中心：50% 50%
颜色 1：rgba(102,126,234,0.5)
颜色 2：transparent

输出：

background: radial-gradient(circle at 50% 50%, rgba(102,126,234,0.5), transparent);

实战 3：饼图

类型：conic
颜色：4 色均分

输出：

background: conic-gradient(
  #e74c3c 0% 25%,
  #f39c12 25% 50%,
  #2ecc71 50% 75%,
  #3498db 75% 100%
);

美观渐变预设

1. 暮光

linear-gradient(135deg, #667eea, #764ba2);

2. 海洋

linear-gradient(135deg, #2E3192, #1BFFFF);

3. 日落

linear-gradient(135deg, #ff6e7f, #bfe9ff);

4. 紫雾

linear-gradient(135deg, #DA22FF, #9733EE);

5. 火焰

linear-gradient(135deg, #f12711, #f5af19);

6. 翠绿

linear-gradient(135deg, #11998e, #38ef7d);

7. 银光

linear-gradient(135deg, #bdc3c7, #2c3e50);

8. 粉色梦幻

linear-gradient(135deg, #ee9ca7, #ffdde1);

9. 深邃夜空

linear-gradient(135deg, #232526, #414345);

10. 落日金

linear-gradient(135deg, #FDEB71, #F8D800);

编程实现

CSS

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

.text-gradient {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.border-gradient {
  border: 2px solid transparent;
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #667eea, #764ba2) border-box;
}

JavaScript 动态渐变

function generateGradient(angle, colors) {
  return `linear-gradient(${angle}deg, ${colors.join(', ')})`;
}

const grad = generateGradient(135, ['#667eea', '#764ba2']);
element.style.background = grad;

SVG 渐变

<svg width="200" height="100">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#667eea"/>
      <stop offset="100%" stop-color="#764ba2"/>
    </linearGradient>
  </defs>
  <rect width="200" height="100" fill="url(#grad1)"/>
</svg>

进阶技巧

技巧 1：多层渐变

background: 
  radial-gradient(circle at 20% 50%, rgba(255,0,0,0.3), transparent),
  radial-gradient(circle at 80% 80%, rgba(0,0,255,0.3), transparent),
  linear-gradient(135deg, #667eea, #764ba2);

技巧 2：动画渐变

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

.animated-gradient {
  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #4facfe);
  background-size: 400% 400%;
  animation: gradient-shift 10s ease infinite;
}

技巧 3：网格渐变

.grid-pattern {
  background: 
    linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px),
    linear-gradient(135deg, #667eea, #764ba2);
  background-size: 50px 50px, 50px 50px, 100% 100%;
}

技巧 4：锥形加载器

.loader {
  background: conic-gradient(transparent 0%, #667eea 100%);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

技巧 5：渐变蒙版

.fade-bottom {
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent);
  mask-image: linear-gradient(to bottom, black 80%, transparent);
}

浏览器兼容

conic-gradient 较新，老浏览器不支持。

与其他工具配合

渐变 + 取色器

工具：取色器

选好颜色后用于渐变。

渐变 + 对比度检查

工具：对比度检查

渐变背景上的文字对比度也要 ≥ 4.5:1。

渐变 + CSS 阴影

工具：CSS 阴影生成器

渐变 + 阴影组合用。

常见问题

Q: 渐变和图片哪个性能好？

A: 渐变是浏览器绘制，比图片加载快，体积小。简单背景用渐变更好。

Q: 怎么做文字渐变？

A: background-clip: text; -webkit-text-fill-color: transparent;，背景设渐变。

Q: 渐变能动画吗？

A: 能。background-size 设大于 100%，用 background-position 动画。或用 CSS 变量。

Q: 怎么让渐变自适应高度？

A: 不用固定高度，渐变会自适应元素高度。

Q: 工具会泄露我的颜色吗？

A: 52tool 渐变生成器在浏览器端运行，颜色值不上传服务器。

常见问题解答

Q: 怎么生成 CSS 渐变？

A: 1) 打开 52tool CSS 渐变生成器；2) 选 linear/radial/conic；3) 选颜色；4) 调角度；5) 复制 CSS。

Q: 怎么做按钮渐变？

A:

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

Q: 怎么做文字渐变？

A:

.text-gradient {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Q: 怎么做动画渐变？

A:

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

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

Q: 怎么做边框渐变？

A:

.border {
  border: 2px solid transparent;
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #667eea, #764ba2) border-box;
}

Q: 怎么做渐变蒙版？

A:

.fade {
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent);
  mask-image: linear-gradient(to bottom, black 80%, transparent);
}

总结

CSS 渐变是设计高频效果：

• 在线生成 → 52tool CSS 渐变生成器
• 三种类型 → linear、radial、conic
• 文字渐变 → background-clip: text
• 动画渐变 → background-size + position

记住：135deg 是常用角度，预设配色直接用，避免颜色过多（3-4 色够）。