在CSS中，我们可以使用两种渐变：线性渐变（linear-gradient）和径向渐变（radial-gradient）。
线性渐变
线性渐变的基本语法如下：
```css
background-image: linear-gradient（direction, color-stop1, color-stop2, ..., color-stopN）；
```
其中：
`direction` 是渐变的方向，可以是角度（如 `45deg`）或关键词（如 `to top right`）。
`color-stop1` 是第一个颜色的停止点，可以是一个颜色值或颜色值加一个百分比。
`color-stop2` 是第二个颜色的停止点，依此类推。
示例
从左到右的线性渐变
```css
.box {
background-image: linear-gradient（to right, red, blue）；
}
```
从上到下的线性渐变
```css
.box {
background-image: linear-gradient（to bottom, red, blue）；
}
```
自定义方向的线性渐变
```javascript
function createDirectionalGradient（element, angle, color1, color2） {
element.style.background = `linear-gradient（${angle}, ${color1}, ${color2}）`；
}
```
径向渐变
径向渐变的基本语法如下：
```css
background-image: radial-gradient（shape size at position, color-stop1, color-stop2, ..., color-stopN）；
```
其中：
`shape` 是渐变的形状，可以是 `circle` 或 `ellipse`。
`size` 是渐变的大小，可以是距离或百分比。
`at position` 是渐变的位置，可以是关键词（如 `center`）或具体坐标。
`color-stop1` 是第一个颜色的停止点，依此类推。
示例
从中心到边缘的径向渐变
```css
.circle {
background-image: radial-gradient（circle at center, red, blue）；
}
```
自定义形状和位置的径向渐变
```css
.ellipse {
background-image: radial-gradient（ellipse at 50% 50%, red, blue）；
}
```
兼容性
为了确保渐变在所有浏览器中都能正常工作，可以使用以下兼容性代码：
```css
/* IE6, IE7 */
filter: progid:DXImageTransform.Microsoft.gradient（startColorstr='000000', endColorstr='ffffff'）；
/* IE8+ */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient（startColorstr='000000', endColorstr='ffffff'）"；
/* Safari 4 +, Chrome 2+ */
background: -webkit-gradient（linear, left top, right top, color-stop（0%, 000000）, color-stop（100%, ffffff））；
```
总结
通过上述方法，你可以在CSS中创建各种渐变效果。线性渐变适用于从一种颜色平滑过渡到另一种颜色，而径向渐变则适用于从中心向外扩散的渐变效果。根据具体需求选择合适的渐变类型和参数，可以实现丰富的视觉效果。