Light

Dither

Any CSS gradient, drawn as an ordered dither in two colours.

npx shadcn@latest add https://ui.netm8.com/r/dither.json

import { Dither } from "@/components/ui/dither"

export default function DitherDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      <Dither image="radial-gradient(circle at 35% 35%, #fff, #000 70%)" className="size-32" />
      <Dither image="linear-gradient(90deg, #000, #fff)" ink="var(--rose)" className="h-32 w-48" />
      <Dither
        image="conic-gradient(from 45deg, #000, #fff)"
        ink="var(--figure)"
        className="size-32"
      />
    </div>
  )
}