DevToolBox免费
博客

CSS 渐变指南：从基础到高级技巧

10 分钟阅读作者 DevToolBox

CSS 渐变是 Web 开发者工具箱中最强大的视觉工具之一。它们无需图片即可创建平滑的颜色过渡。本完整 CSS 渐变指南涵盖从基础线性渐变到高级技巧。

使用我们的 CSS 渐变生成器可视化创建渐变 →

线性渐变

线性渐变沿直线方向过渡颜色，是最常用的渐变类型。

Basic Syntax

/* Default: top to bottom */
background: linear-gradient(#3b82f6, #8b5cf6);

/* With direction */
background: linear-gradient(to right, #3b82f6, #8b5cf6);

/* With angle */
background: linear-gradient(45deg, #3b82f6, #8b5cf6);

/* Multiple color stops */
background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6);

/* Color stops with positions */
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);

Direction Keywords

background: linear-gradient(to top, ...);         /* 0deg */
background: linear-gradient(to right, ...);       /* 90deg */
background: linear-gradient(to bottom, ...);      /* 180deg - default */
background: linear-gradient(to left, ...);        /* 270deg */
background: linear-gradient(to top right, ...);   /* diagonal */
background: linear-gradient(to bottom left, ...); /* diagonal */

Hard Color Stops (Sharp Transitions)

/* Sharp 50/50 split */
background: linear-gradient(90deg, #3b82f6 50%, #ef4444 50%);

/* Three equal sections */
background: linear-gradient(90deg,
  #3b82f6 33.3%, #22c55e 33.3%,
  #22c55e 66.6%, #ef4444 66.6%
);

径向渐变

径向渐变从中心点向外辐射，呈圆形或椭圆形。

/* Default: ellipse at center */
background: radial-gradient(#3b82f6, #1e1b4b);

/* Circle shape */
background: radial-gradient(circle, #3b82f6, #1e1b4b);

/* Positioned center */
background: radial-gradient(circle at top left, #3b82f6, #1e1b4b);
background: radial-gradient(circle at 25% 75%, #3b82f6, #1e1b4b);

/* Sized circle */
background: radial-gradient(circle 200px at center, #3b82f6, transparent);

/* Size keywords */
background: radial-gradient(closest-side, #3b82f6, #1e1b4b);
background: radial-gradient(farthest-corner, #3b82f6, #1e1b4b);

/* Spotlight effect */
background: radial-gradient(circle 300px at 50% 30%,
  rgba(59, 130, 246, 0.3), transparent
);

锥形渐变

锥形渐变围绕中心点旋转过渡颜色，适合饼图和装饰元素。

/* Basic color wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Pie chart */
background: conic-gradient(
  #3b82f6 0deg 120deg,   /* 33% */
  #22c55e 120deg 210deg, /* 25% */
  #f59e0b 210deg 300deg, /* 25% */
  #ef4444 300deg 360deg  /* 17% */
);

/* Starting angle and position */
background: conic-gradient(from 45deg at 50% 50%, #3b82f6, #8b5cf6, #3b82f6);

/* Donut chart (combine with radial) */
background:
  radial-gradient(circle 60px, var(--bg-primary) 99%, transparent),
  conic-gradient(#3b82f6 0% 40%, #22c55e 40% 70%, #ef4444 70% 100%);
border-radius: 50%;

重复渐变

重复渐变通过平铺渐变模式填充整个元素，适合创建条纹和图案。

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #3b82f6, #3b82f6 10px,
  transparent 10px, transparent 20px
);

/* Horizontal stripes */
background: repeating-linear-gradient(
  0deg,
  #1e1b4b, #1e1b4b 2px,
  transparent 2px, transparent 20px
);

/* Repeating radial */
background: repeating-radial-gradient(
  circle, #3b82f6, #3b82f6 5px,
  transparent 5px, transparent 15px
);

/* Repeating conic (sunburst) */
background: repeating-conic-gradient(
  #3b82f6 0deg 10deg, transparent 10deg 20deg
);

多重叠加渐变

可以在单个元素上叠加多个渐变，用逗号分隔。

/* Spotlight overlay on gradient */
background:
  radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1), transparent 50%),
  linear-gradient(135deg, #0f172a, #1e1b4b);

/* Cross pattern */
background:
  linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.05) 50.5%, transparent 50.5%),
  linear-gradient(0deg, transparent 49.5%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.05) 50.5%, transparent 50.5%);
background-size: 40px 40px;

渐变文字效果

使用 background-clip 将渐变应用到文字上。

/* Gradient text effect */
.gradient-text {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* fallback */
}

/* Animated gradient text (using @property) */
@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.animated-gradient-text {
  background: linear-gradient(var(--gradient-angle), #3b82f6, #ec4899, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rotate-gradient 3s linear infinite;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

渐变边框

CSS 不直接支持渐变边框，但有巧妙的变通方案。

/* Method 1: border-image (no border-radius support) */
.gradient-border-1 {
  border: 3px solid;
  border-image: linear-gradient(135deg, #3b82f6, #ec4899) 1;
}

/* Method 2: pseudo-element (supports border-radius) */
.gradient-border-2 {
  position: relative;
  border-radius: 12px;
  padding: 3px; /* border width */
  background: linear-gradient(135deg, #3b82f6, #ec4899);
}
.gradient-border-2::before {
  content: '';
  position: absolute;
  inset: 3px; /* same as padding */
  background: var(--bg-card); /* inner background */
  border-radius: 9px; /* outer radius minus border width */
}
.gradient-border-2 > * { position: relative; }

/* Method 3: outline + mask (modern browsers) */
.gradient-border-3 {
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, #3b82f6, #ec4899) border-box;
  border: 3px solid transparent;
  border-radius: 12px;
}

创意渐变图案

组合重复渐变创建复杂图案。

/* Checkerboard */
background:
  conic-gradient(#1e293b 90deg, transparent 90deg 180deg,
    #1e293b 180deg 270deg, transparent 270deg) 0 0 / 40px 40px;

/* Dots */
background:
  radial-gradient(circle 3px, #3b82f6 99%, transparent) 0 0 / 20px 20px;

/* Carbon fiber */
background:
  radial-gradient(#333 15%, transparent 16%),
  radial-gradient(#333 15%, transparent 16%);
background-size: 8px 8px;
background-position: 0 0, 4px 4px;
background-color: #222;

性能与浏览器兼容性

渐变由 GPU 渲染，性能优秀。

  • GPU-rendered: Gradients are composited by the GPU, making them faster than equivalent images.
  • Zero HTTP requests: Unlike background images, gradients add no network overhead.
  • Retina-ready: Gradients scale perfectly at any resolution without becoming pixelated.
  • Browser support: Linear and radial gradients have 99%+ support. Conic gradients work in all modern browsers (Chrome, Firefox, Safari, Edge). Use @supports for progressive enhancement if targeting older browsers.
  • Avoid: Extremely complex gradients with 20+ color stops on elements that reflow frequently.

常见问题

CSS 渐变可以做动画吗？

不能直接用 CSS 过渡动画，但可以通过 @property、background-position 或 Houdini 实现。

linear-gradient 和 radial-gradient 有什么区别？

线性 = 沿直线。径向 = 从中心向外。

如何创建渐变边框？

使用 border-image 或伪元素方法。

CSS 渐变影响性能吗？

不会，GPU 渲染，比图片更快。

如何避免颜色条带现象？

添加中间色停点，使用较长的渐变距离。

CSS 渐变是为 Web 项目增加视觉深度的强大工具。使用我们的工具实验创建。

使用 CSS 渐变生成器设计你的渐变 →

𝕏 Twitterin LinkedIn
这篇文章有帮助吗？

保持更新

获取每周开发技巧和新工具通知。

无垃圾邮件，随时退订。

试试这些相关工具

🌈CSS Gradient Generator🎨Color Converter🔲Box Shadow Generator🎨Color Palette Generator

相关文章

每个网站必备的 Meta 标签：HTML Meta Tag 完全指南

必备的 HTML meta 标签：SEO、Open Graph、Twitter Cards、安全性和性能优化。包含完整的复制粘贴模板。

CSS 文字渐变：如何用纯 CSS 创建渐变文字

用 CSS 创建炫酷的渐变文字。使用 background-clip、-webkit-text-fill-color 的分步指南，以及所有浏览器的降级策略。