Docs·Dither Gradient

Dither Gradient

An animated dithered gradient background effect using canvas with Bayer matrix dithering. Creates a beautiful retro-style aesthetic with customizable colors and animation.

Installation

pnpm dlx shadcn@latest add @componentry/dither-gradient

Usage

API Reference

PropertyTypeDefault
colorFrom

Start color of the gradient.

string"#6366f1"
colorMid

Middle color of the gradient.

string"#8b5cf6"
colorTo

End color of the gradient.

string"#ec4899"
intensity

Dithering intensity from 0 to 1.

number0.15
speed

Animation speed multiplier.

number3
angle

Gradient angle in degrees.

number45

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X

Dither Gradient

import { DitherGradient } from "@/components/ui/dither-gradient"
<div className="relative h-[300px] w-full overflow-hidden rounded-xl border bg-background">
  <DitherGradient />
  <div className="relative z-10 flex h-full items-center justify-center">
    <h3 className="text-2xl font-bold text-white">Dither Gradient</h3>
  </div>
</div>