DitherGradient | astro-dither docs

Preview

pnpm add astro-dither

Or copy the source into your project:

npx astro-dither add gradient

---
import { DitherGradient } from "astro-dither";
---

<DitherGradient mode="linear" palette={["#000000", "#00b2ff"]} />

A typed wrapper over the gradient effect. mode picks the ramp and palette the colours; everything else is the shared effect API.

Prop	Type	Default	Description
`mode`	`"linear" \| "radial" \| "conic" \| "wave"`	"linear"	The ramp shape.
`angle`	`number`	180	Ramp direction in degrees.
`cx`	`number`	0.5	Centre x for radial/conic.
`cy`	`number`	0	Centre y for radial/conic.
`radius`	`number`	1.05	Radial reach.
`palette`	`string[]`	the effect's	2 to 8 colours, paper first, brightest last. `transparent` works.
`cell`	`number`	2	Size of one dither cell in CSS pixels. Rounded to whole device pixels so cells stay even.
`matrix`	`2 \| 4 \| 8 \| "noise"`	8	The Bayer threshold size, or noise for a random look.
`speed`	`number`	1	Playback speed. 0 draws one still frame.
`stillTime`	`number`	the effect's	The moment drawn when motion is off or reduced, in seconds.
`levels`	`number`	0 (all)	Tones the field snaps to before dithering. Low values give hard, posterised steps.
`bloom`	`number`	0	Bloom around lit cells, 0 to 1. Set a positive prop to create the overlay before overriding it with CSS `--dither-bloom`.
`bloomRadius`	`number`	10	Bloom blur in CSS pixels. CSS `--dither-bloom-radius` overrides it.
`class`	`string`	undefined	Classes on the surface element, for size and position.

Decorative surfaces render aria-hidden. Put real text on top, not inside them.
With reduced motion it draws one still frame and stops.
It pauses when scrolled out of view or when the tab is hidden.