Material backgrounds combine semi-transparent backgrounds with backdrop blur to create frosted glass effects. These utilities include built-in borders and adapt to light and dark mode automatically.

## Usage [#usage]

```tsx
<div className="material-medium rounded-lg px-4 py-2">
  <h2>Frosted Glass Card</h2>
  <p>Content with backdrop blur</p>
</div>
```

## Variants [#variants]

<div className="relative mt-4 rounded-xl overflow-hidden h-[400px]">
  <div className="absolute inset-0 flex flex-col z-0">
    <div className="flex-1 bg-blue-500" />

    <div className="flex-1 bg-purple-500" />

    <div className="flex-1 bg-pink-500" />

    <div className="flex-1 bg-orange-500" />

    <div className="flex-1 bg-red-500" />
  </div>

  <div className="absolute inset-0 grid grid-cols-5 gap-4 p-8 z-[1]">
    <div className="px-4 py-2 material-ultra-thick rounded-lg flex flex-col justify-end">
      <div className="font-medium">
        Ultra Thick
      </div>
    </div>

    <div className="px-4 py-2 material-thick rounded-lg flex flex-col justify-end">
      <div className="font-medium">
        Thick
      </div>
    </div>

    <div className="px-4 py-2 material-medium rounded-lg flex flex-col justify-end">
      <div className="font-medium">
        Medium
      </div>
    </div>

    <div className="px-4 py-2 material-thin rounded-lg flex flex-col justify-end">
      <div className="font-medium">
        Thin
      </div>
    </div>

    <div className="px-4 py-2 material-ultra-thin rounded-lg flex flex-col justify-end">
      <div className="font-medium">
        Ultra Thin
      </div>
    </div>
  </div>
</div>

## Reference [#reference]

| Class                  | Opacity | Blur | Use Case                         |
| ---------------------- | ------- | ---- | -------------------------------- |
| `material-ultra-thick` | 84%     | 30px | Strong visual separation         |
| `material-thick`       | 72%     | 30px | Navigation bars, prominent cards |
| `material-medium`      | 60%     | 30px | Cards, modals, dialogs           |
| `material-thin`        | 48%     | 30px | Tooltips, subtle overlays        |
| `material-ultra-thin`  | 36%     | 30px | Minimal blur effect              |

Each variant includes a matching border. Colors derive from `--background` and adapt to light/dark mode.