Shader Gradient

A subtle animated WebGL gradient wash — soft color blobs over the theme background, with optional pointer follow.

Soft-focus hero wash — sky, sage, cream, and lavender. Follows your shadcn theme (html.dark): light pastels on paper in light mode, deep ~700-weight hues on slate in dark. Press d to toggle. Place it behind content — no extra dependencies.

Shader Gradient

Props

Palette

Speed0.14

Blur0.70

Intensity0.95

Interactive

Follow the pointer

Installation

pnpm dlx shadcn@latest add @23rd/shader-gradient

Or install straight from the public GitHub source registry:

pnpm dlx shadcn@latest add radiumcoders/23rd.dev/shader-gradient

Usage

Place it behind content in a relatively positioned container. With the default theme="auto", it tracks shadcn / next-themes (class on <html>).

"use client"

import { ShaderGradient } from "@/components/ui/shader-gradient"

export function Hero() {
  return (
    <div className="relative h-svh overflow-hidden bg-background">
      <ShaderGradient />
      <div className="relative z-10 p-10">Your content</div>
    </div>
  )
}

Force a palette if you need to:

<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`	—