Hero Dithering

dither x pixel

Hero section with ordered dithering shader effect. From Cult UI.

herodithershadercultui

Code

hero-dither.tsx

/* A radial vignette over a 45° hairline repeat — the repeating gradient is the
   "dither", and it hides banding in the flat gradient underneath. */
export function HeroDither({ className = "" }: { className?: string }) {
  return (
    <div className={`rounded-xl bg-gradient-to-br from-zinc-800 via-zinc-700 to-zinc-900 ${className}`}
      style={{
        backgroundImage:
          "radial-gradient(circle, transparent 30%, rgba(0,0,0,0.3) 70%), repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px)",
      }} />
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Hero Dithering component and wire it to my accent.”