Installation
pnpm dlx shadcn@latest add https://dithercn.dev/r/mesh-gradient.jsonUsage
import { MeshGradient } from "@/components/dithercn/mesh-gradient";
export function Hero() {
return (
<section className="relative isolate min-h-[480px]">
<MeshGradient className="absolute inset-0 -z-10" />
<h1>Your headline</h1>
</section>
);
}Each blob drifts on its own slow orbit. Where two meet, their colours blend through the palette before the dither, so the seams read as soft gradients instead of edges. The default palette uses tints of your theme's --dither-ink with a touch of violet.
Examples
Five blobs, warm palette
palette starts with paper and then takes one colour per blob. Pass blobs + 1 colours to give each blob its own; the order sets which colours sit next to each other where blobs meet. Blue noise, the default, keeps the grain even across so many tones.
Behind a form
Three large blobs, bigger cells and a slower speed make a calm backdrop. The form sits on a translucent panel so the colour shows around it without hurting the text.
Props
| Prop | Type | Default |
|---|---|---|
| blobs How many colour blobs drift across the box. | Type: 3 | 4 | 5 | Default 4 |
| size Size of each blob as a share of the box height. | Type: number | Default 0.6 |
| palette Colours from paper to ink: palette names such as "blue", CSS variable names, or any CSS colour. | Type: [DitherColor, DitherColor, ...DitherColor[]] | Default Paper, then four tints of --dither-ink |
| matrix The threshold pattern. See Dither engine. | Type: "bayer2" | "bayer4" | "bayer8" | "blue-noise" | Default "blue-noise" |
| cell Size of one dither cell in CSS pixels. | Type: number | Default --dither-cell |
| speed How fast it moves. | Type: number | Default 1 |
| animate false draws one still frame. | Type: boolean | Default true |
| className Size and position. The background fills this box. | Type: string | Default – |
Notes
- It is decorative and hidden from assistive technology. Put real text on top of it, not inside it.
- With reduced motion turned on, it draws one still frame and stops.
- It pauses when scrolled out of view or when the tab is hidden, and releases its WebGL context when far offscreen. Without WebGL it shows a CSS approximation in the same colours.
- It costs one small draw per frame at 30 fps, at one pixel per dither cell. See Performance.