# CSS Gradients

CSS gradients allow you to display smooth transitions between two or more specified colors. They are treated as images by the browser (`background-image`). There are two main types: **Linear** and **Radial**.

## 1. Linear Gradient (`linear-gradient`)

A linear gradient creates a band of colors that progress in a straight line.

**Syntax:** `background-image: linear-gradient(direction, color-stop1, color-stop2, ...);`

### Direction
You can specify the direction of the gradient line.
*   **Keywords:** `to bottom` (default), `to top`, `to right`, `to left`, `to bottom right`, etc.
*   **Angles:** `0deg` (to top), `90deg` (to right), `180deg` (to bottom), etc.

```css
/* Top to Bottom (Default) */
.linear-default {
  background-image: linear-gradient(red, yellow);
}

/* Left to Right */
.linear-right {
  background-image: linear-gradient(to right, red, yellow);
}

/* Diagonal */
.linear-diagonal {
  background-image: linear-gradient(to bottom right, red, yellow);
}
```

## 2. Radial Gradient (`radial-gradient`)

A radial gradient creates a transition that radiates from a central point (origin) outward.

**Syntax:** `background-image: radial-gradient(shape size at position, start-color, ..., last-color);`

### Shape
*   **`ellipse`** (Default): Adapts to the aspect ratio of the container.
*   **`circle`**: Forces a perfect circle regardless of container shape.

### Size
Defines where the gradient ends.
*   `farthest-corner` (Default)
*   `closest-side`
*   `closest-corner`
*   `farthest-side`

```css
/* Default Radial (Ellipse, Center) */
.radial-default {
  background-image: radial-gradient(red, yellow, green);
}

/* Circle */
.radial-circle {
  background-image: radial-gradient(circle, red, yellow, green);
}
```

## 3. Key Differences

*   **Geometry:** Linear follows a straight line; Radial follows a circular/elliptical pattern from a center point.
*   **Parameters:** Linear uses direction (angle/side); Radial uses shape, size, and position.
*   **Use Cases:** Linear is great for headers, buttons, and shadows. Radial is great for spotlights, suns, or circular vignettes.

[[programming/css/css]]
[[programming/css/colors-and-backgrounds]]