# Mesh gradient

> A slowly moving mesh gradient drawn on the GPU, with grain, behind any content.

Component · Pro · https://lodeui.com/components/mesh-gradient

## When to use

- A hero, pricing card or sign-up panel that needs warmth and a little life.
- Replacing a static gradient image with something that moves slowly.

## When not to use

- Behind long text: keep it to short headlines and buttons.
- Many on one page: each one is its own GPU canvas.

## Installation

```bash
npx shadcn@latest add @lode/mesh-gradient
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { MeshGradient } from "@/components/ui/mesh-gradient";

export function Hero() {
  return (
    <MeshGradient className="rounded-3xl px-6 py-24 text-center text-white">
      <h1 className="text-5xl font-semibold">Ship the interface.</h1>
    </MeshGradient>
  );
}
```

## API reference

### MeshGradient

A container with a moving GPU gradient behind its children. Takes any div props.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| colors | `[string, string, string, string]` | `["#f6d5a2", "#e9a23b", "#d0624a", "#2b2847"]` | Four colours. Any CSS colour, including var(--…). |
| speed | `number` | `1` | Pace of the drift. 0 holds one frame. |
| warp | `number` | `0.45` | How much the colours swirl into each other, 0–1. |
| grain | `number` | `0.05` | Film grain, 0–0.2. Hides banding on big screens. |
| seed | `number` | `0` | Changes the starting arrangement. |

## Accessibility

- The canvas is decorative and hidden from assistive tech.
- Check contrast of text over your colours; white text needs the darker stops behind it.

## Motion

- Drifts slowly and continuously.
- With reduced motion it renders one still frame.

## Responsive behavior

- Fills its container and redraws on resize.

## Performance

- Rendered below device resolution (the gradient is soft) and scaled up by CSS.
- Pauses off screen and in background tabs.
- Falls back to CSS radial gradients where WebGL isn't available.

## Notes for AI

- Order colours light to dark so the bottom stays readable under white text.
- Set className for size and rounding; children render on top.

## Related

- [Aurora background](https://lodeui.com/components/aurora-background) — Slow drifting northern-lights glow behind any section.
- [Globe](https://lodeui.com/components/globe) — A dotted globe with arcs travelling between places and pulsing markers. Drag to spin.
- [Particles](https://lodeui.com/components/particles) — A drifting constellation of dots on canvas that moves away from the pointer.