### [CSS3渐变背景全攻略：线性渐变、径向渐变与重复渐变的创意用法详解](https://www.huociguo.com/article/2075)

**Published:** 2026-11-10T09:07:36

**Author:** 米了

**Excerpt:** CSS3渐变背景全攻略：线性渐变、径向渐变与重复渐变的创意用法详解渐变就是“CSS图像值”，放在 或者 属性中…

![](https://api.huociguo.com/wp-content/uploads/2026/11/20261110170658692-100931dbfa-1.webp "20261110170658692-100931dbfa-1")

CSS3渐变背景全攻略：线性渐变、径向渐变与重复渐变的创意用法详解

渐变就是“CSS图像值”，放在`background`或者`background-image`属性中，而不是`background-color`里。不需要切片图片、不会占用带宽、可以随着容器大小自动调整尺寸，它是现代网页设计常用的方法之一。

## 线性渐变：方向就是构图

基础语法：

```css
background: linear-gradient(方向, 色标1 位置, 色标2 位置, ...);
```

有三种方式来表达这个意思：

-   关键字：`to right` / `to bottom right`
    
-   角度：`45deg`（0deg朝上，顺时针递增）
    
-   省略：默认 `to bottom`
    

```css
/* 斜向双色 */
.card {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

/* 多色标精确定位 */
.rainbow {
  background: linear-gradient(
    90deg,
    #ff5f6d 0%,
    #ffc371 35%,
    #47e0a0 70%,
    #5b86e5 100%
  );
}
```

**硬停技巧**：相邻色标写在同一位置，取消过渡，直接切色。

```css
.split {
  background: linear-gradient(
    90deg,
    #1f2937 0 50%,
    #f59e0b 50% 100%
  );
}
```

硬停可以很快完成进度条、色块分割和条纹底纹的效果，不需要额外的DOM元素。

## 径向渐变：光线由一个点向外扩散

语法结构：

```css
background: radial-gradient(形状 尺寸 at 中心点, 色标...);
```

-   形状：`circle` 正圆 / `ellipse` 椭圆（默认）
    
-   尺寸：`closest-side` / `farthest-corner` 等
    
-   中心点：`at center` / `at 30% 20%` / `at top left`
    

```css
/* 左上角光斑 */
.spotlight {
  background: radial-gradient(
    circle at 20% 15%,
    rgba(255,255,255,0.25) 0%,
    transparent 60%
  );
}

/* 暗角效果 */
.vignette {
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0,0,0,0.55) 100%
  );
}
```

径向渐变可以用来制作聚光灯、头像光环、卡片高光以及镜头暗角等效果，比线性渐变更具有“空间感”。

## 重复渐变：将渐变转换成纹理

### 重复的线性渐变

```css
/* 45°细条纹 */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #eef2ff 0 12px,
    #c7d2fe 12px 24px
  );
}
```

### 重复的径向渐变

```css
/* 同心圆环 */
.rings {
  background: repeating-radial-gradient(
    circle at center,
    #1e293b 0 6px,
    #334155 6px 14px
  );
}
```

### 点阵式背景（小圆点均匀分布）

```css
.dots {
  background-color: #f8fafc;
  background-image: radial-gradient(#94a3b8 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}
```

渐变的好处是可以用纯CSS来制作出条纹、格子、圆形和雷达线等图案，代替传统的平铺图像。

## 创意组合技法

### 1\. 多层渐变叠加

```css
.hero {
  background:
    linear-gradient(to bottom, transparent 55%, rgba(0,0,0,0.75)),
    radial-gradient(circle at 80% 20%, rgba(139,92,246,0.35), transparent 50%),
    linear-gradient(135deg, #0f172a, #1e293b);
}
```

用逗号隔开，上面一层是上层的文字，下面一层是下层的文字，可以叠加渐变色和图像。

### 2\. 渐变文字

```css
.gradient-text {
  background: linear-gradient(90deg, #3b82f6, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

只给大标题用，要保证它的可阅读性。

### 3\. 渐变边框

```css
.btn {
  position: relative;
  border-radius: 12px;
  background: #0f172a;
}
.btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
  z-index: -1;
}
```

### 4\. 现代色彩空间插值

默认的sRGB混合互补色会显得比较暗淡，可以使用`oklch`来调整：

```css
.smooth {
  background: linear-gradient(in oklch, #ff5f6d, #5b86e5);
}
```

## 避坑要点

-   渐变不等于颜色，不要把它放在`background-color`里
    
-   0度向上，90度向右，顺时针方向
    
-   硬停边缘在低清屏幕上会出现锯齿，可以保留 `50% 50.5%` 的微渐变
    
-   使用 `rgba(...,0)` 代替 `transparent`，防止出现灰色
    
-   没有高度的时候渐变就不起作用了，需要设置一个高度或者用里面的东西把高度撑起来
    

## 总结

线性渐变用来控制方向节奏，径向渐变来营造光源和空间感，重复渐变使色彩可以平铺使用。三者结合之后，背景就不再是单纯的底色了，而成为了层次、光影以及品牌形象的载体。掌握了色标的位置、硬停切割、中心点偏移以及多层合成等技巧后，就可以用很少量的CSS代码代替大量的图片资源。

**Tags:** CSS3, 径向渐变, 渐变背景, 线性渐变, 重复渐变

**Categories:** CSS3

---