Installation
pnpm dlx shadcn@latest add https://dithercn.dev/r/dither-gradient.jsonUsage
import { DitherGradient } from "@/components/dithercn/dither-gradient";
export function Hero() {
return (
<section className="relative isolate min-h-[480px]">
<DitherGradient angle={160} className="absolute inset-0 -z-10" />
<h1>Your headline</h1>
</section>
);
}The gradient fills its box, so give it a size with className. It runs from paper at the start to ink at the end, in your theme's --dither-paper and --dither-ink colours.
Examples
Glow behind a headline
A radial gradient that starts as ink and fades to paper. With the centre below the bottom edge and a small radius, only a low arc of light shows, and the headline sits on clean paper.
Conic sweep through a palette
palette takes any number of colours from paper to ink. A conic sweep jumps from its last colour back to its first, so this palette starts and ends on the background to hide the seam. Blue noise gives it an even, grainy texture.
Still, inside a card
With animate={false} the gradient draws one frame and stops. to={0.55} keeps the densest band light enough for text to sit on, and setting --dither-paper to the card's own background blends the gradient into it.
Props
| Prop | Type | Default |
|---|---|---|
| mode The gradient's shape. | Type: "linear" | "radial" | "conic" | Default "linear" |
| angle Linear: the direction in degrees, as in CSS. Conic: where the sweep starts. | Type: number | Default 180 (linear), 0 (conic) |
| center Radial and conic only. The centre as fractions of the box, measured from the top left. | Type: [x: number, y: number] | Default [0.5, 0.5] |
| radius Radial only. 1 reaches the farthest corner. | Type: number | Default 1 |
| from Tone at the start, from 0 (paper) to 1 (ink). | Type: number | Default 0 |
| to Tone at the end. | Type: number | Default 1 |
| noise How far a slow noise drift bends the bands. 0 gives straight, even bands. | Type: number | Default 0.12 |
| palette Colours from paper to ink: palette names such as "green", CSS variable names or any CSS colour. | Type: [DitherColor, DitherColor, ...DitherColor[]] | Default ["--dither-paper", "--dither-ink"] |
| matrix The threshold pattern. See Dither engine. | Type: "bayer2" | "bayer4" | "bayer8" | "blue-noise" | Default "bayer4" |
| levels Tones the gradient snaps to before dithering. Lower values give visible bands. | Type: number | Default All the matrix can draw |
| cell Size of one dither cell in CSS pixels. | Type: number | Default --dither-cell |
| speed How fast the noise drifts. | Type: number | Default 1 |
| animate false draws one still frame. | Type: boolean | Default true |
| className Size and position. The gradient fills this box. | Type: string | Default – |
Notes
- The gradient 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 smooth CSS gradient in the same colours.
- One gradient costs one small draw per frame at 30 fps, at one pixel per dither cell. See Performance.