Dither gradientPro

A linear, radial or conic tonal ramp drawn as a 1 bit dither: the monochrome replacement for gradient fills, static and token colored.

Markdown

On this page

ProA release banner lit by a radial 1 bit ramp instead of a color gradient.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/dither-gradient

Usage

tsx

import { DitherGradient } from "@/components/ui/chatcn/pro/dither-gradient"

<DitherGradient type="radial" center={[0.5, 1.1]} from={0.9} to={0} smooth className="aspect-[2/1]">
  <h2>Effects that follow your theme</h2>
</DitherGradient>

from and to are ink coverage, 0 to 1, so the ramp means the same thing in light and dark. It draws once per size or theme change and never loops. Keep it inside a bounded panel; it is not a page background.

Examples

Ramps and patterns

ProLinear, radial and conic ramps, Bayer and blue noise patterns, and a ramp on a transparent paper.

Props

Prop	Type	Notes
`type`	`"linear" \| "radial" \| "conic"`	Default `linear`
`angle`	`number`	Degrees, CSS convention. Default 180, top to bottom
`center`	`[x, y]`	Fractions of the box for radial and conic. Default `[0.5, 0.5]`
`from`, `to`	`number`	Ink coverage at each end. Defaults 1 and 0
`smooth`	`boolean`	Ease the ends
`algorithm`	`"bayer-2" \| "bayer-4" \| "bayer-8" \| "blue-noise"`	Default `bayer-8`
`pixelSize`	`number`	Default 2
`ink`, `paper`	`string`	Tokens or CSS colors; `paper` may be `transparent`

Accessibility

Decorative: the canvas is aria-hidden and children stay ordinary content.
Under forced colors the ramp hides and your content sits on the system canvas.
Text over a ramp needs a calm area: keep the dense end away from the copy, as in the demo.

Motion

None. The first draw fades in over 200 ms.