# 渐变

URL: https://caijiao.org/css/04-color-background/03-gradient
Source: docs/css/04-color-background/03-gradient.md
Description: 渐变是一种平滑过渡的颜色变化效果，CSS 支持线性渐变和径向渐变，常用于背景和装饰。

CSS 渐变可以实现颜色的平滑过渡，主要有线性渐变（linear-gradient）和径向渐变（radial-gradient）两种。

## 1. 线性渐变（linear-gradient）

沿着指定方向或角度，颜色逐渐变化：

```css
background: linear-gradient(to right, red, yellow);
background: linear-gradient(45deg, blue, green);
```

## 2. 径向渐变（radial-gradient）

从中心向外辐射状的颜色变化：

```css
background: radial-gradient(circle, red, yellow, green);
```

---

## 背景属性示例

[在线代码演示](/css/demos/5.html)