Shader Gradient
A quiet WebGL color wash for landing heroes, empty states, and marketing sections — sits behind UI, follows the theme, optional pointer follow.
Not a standalone gradient. Use it as atmosphere behind a hero, wait screen, or empty state so the page feels finished without competing with the copy. Soft sky / sage / cream / lavender on paper in light mode; visible dusk hues in dark. Press d to toggle.
Landing
A first screen that already feels finished
Headline and a primary action sit on the wash. The shader stays in the back.
Follow the pointer
Installation
pnpm dlx shadcn@latest add @23rd/shader-gradientOr install straight from the public GitHub source registry:
pnpm dlx shadcn@latest add radiumcoders/23rd.dev/shader-gradientUsage
Pin it behind a relatively positioned section. Keep content in a later stacking context (relative z-10). Default theme="auto" follows shadcn / next-themes (class on <html>).
"use client"
import { ShaderGradient } from "@/components/ui/shader-gradient"
export function Hero() {
return (
<section className="relative isolate min-h-svh overflow-hidden bg-background">
<ShaderGradient />
<div className="relative z-10 mx-auto flex min-h-svh max-w-xl flex-col items-center justify-center px-6 text-center">
<p className="text-xs font-medium tracking-[0.18em] text-muted-foreground uppercase">
New
</p>
<h1 className="mt-3 text-4xl font-medium tracking-tight">
Ship the page, not the backdrop
</h1>
<p className="mt-3 text-muted-foreground">
Headline, proof, and a primary action sit on the wash. The shader
stays quiet.
</p>
</div>
</section>
)
}Force a palette if the parent theme should not drive it:
<ShaderGradient theme="light" />
<ShaderGradient theme="dark" />Props
| Prop | Type | Default |
|---|---|---|
colors | string[] | sky / sage / cream / lavender |
speed | number | 0.14 |
blur | number | 0.7 |
intensity | number | 0.95 |
interactive | boolean | true |
theme | "light" | "dark" | "auto" | auto |
className | string | React only |
class | string | Svelte only |