DocsDither 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

Dependencies: clsx tailwind-merge

Usage

API Reference

PropTypeDefault
colorFromstring

Start color of the gradient.

"#6366f1"
colorMidstring

Middle color of the gradient.

"#8b5cf6"
colorTostring

End color of the gradient.

"#ec4899"
intensitynumber

Dithering intensity from 0 to 1.

0.15
speednumber

Animation speed multiplier.

3
anglenumber

Gradient angle in degrees.

45

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
PreviousWebGL LiquidNextDithered Logo

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>