tailwindcss-backgrounds

# Tailwind CSS Backgrounds Skill

Complete reference for background utilities in Tailwind CSS v4.1, including colors, gradients, images, positioning, sizing, and blend modes.

## Background Colors

Use `bg-{color}` utilities to set background colors with the modernized OKLCH color palette.

```html
<!-- Basic colors -->
<div class="bg-red-500"></div>
<div class="bg-blue-600"></div>
<div class="bg-emerald-400"></div>

<!-- Opacity modifiers -->
<div class="bg-blue-500/50"></div>
<div class="bg-slate-900/75"></div>
```

### Color Palette (OKLCH P3)

The default Tailwind palette uses OKLCH color space for perceptually uniform colors across the wider P3 gamut:

- **Neutrals**: slate, gray, zinc, neutral, stone
- **Colors**: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose

Each color has 11 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

## Linear Gradients

Create linear gradients using `bg-linear-*` utilities with direction and color stops.

```html
<!-- Directions -->
<div class="bg-linear-to-t from-blue-500 to-purple-500"></div>
<div class="bg-linear-to-r from-green-400 via-blue-500 to-purple-600"></div>
<div class="bg-linear-to-br from-yellow-200 to-red-600"></div>

<!-- Available directions -->
<!-- bg-linear-to-t, to-tr, to-r, to-br, to-b, to-bl, to-l, to-tl -->

<!-- Custom angles -->
<div class="bg-linear-45 from-slate-400 to-slate-600"></div>
<div class="bg-linear-180 from-indigo-500 to-pink-500"></div>
```

### Direction Utilities

- `bg-linear-to-t` - to top
- `bg-linear-to-tr` - to top right
- `bg-linear-to-r` - to right
- `bg-linear-to-br` - to bottom right
- `bg-linear-to-b` - to bottom
- `bg-linear-to-bl` - to bottom left
- `bg-linear-to-l` - to left
- `bg-linear-to-tl` - to top left
- `bg-linear-<angle>` - custom angle (e.g., `bg-linear-45`)

## Radial Gradients

Create radial gradients using `bg-radial-*` utilities.

```html
<div class="bg-radial from-yellow-400 to-slate-