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

PropTypeDefault
colorFromStart color of the gradient.
string"#6366f1"
colorMidMiddle color of the gradient.
string"#8b5cf6"
colorToEnd color of the gradient.
string"#ec4899"
intensityDithering intensity from 0 to 1.
number0.15
speedAnimation speed multiplier.
number3
angleGradient angle in degrees.
number45

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

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

Have any questions?
Contact on@harshjdhv

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>