Radial Glow

A warm glow rising from the bottom edge. Use it under a headline or at the foot of a page.

Rising soon

radial-glow-demo.tsx

import { RadialGlow } from "@/components/radial-glow";

export function RadialGlowDemo() {
  return (
    <RadialGlow className="flex h-[360px] items-end p-8">
      <h2 className="text-3xl font-semibold tracking-tight text-white">
        Rising soon
      </h2>
    </RadialGlow>
  );
}

Installation

pnpm dlx shadcn@latest add https://gradients.sh/r/radial-glow.json

Usage

import { RadialGlow } from "@/components/radial-glow";

<RadialGlow className="h-[480px]">{children}</RadialGlow>;

The gradient fills its box, so give it a height. Children render on top.

Props

Prop	Type	Default
`children` Content layered on top of the gradient.	`ReactNode`	`—`
`colors` Two to six colours: hex, oklch(), names or var(--token).	`[string, string, ...string[]]`	`["#f3f1ff", "#9db4ff", "#5a46cb", "#1d1240"]`
`background` Base colour under the gradient.	`string`	`"#020204"`
`speed` 0 to 2. How fast the gradient moves. 0 holds it still.	`number`	`0.6`
`loopSeconds` 4 to 30. The animation repeats exactly every loopSeconds.	`number`	`14`
`scale` 0.25 to 4. Noise frequency: higher means smaller shapes.	`number`	`1`
`warp` 0 to 1. Domain-warp strength.	`number`	`0.5`
`grain` 0 to 1. Film grain.	`number`	`0.14`
`blur` 0 to 1. Softness.	`number`	`0.45`
`seed` Integer seed for the noise field.	`number`	`11`
`dither` Ordered 4×4 Bayer dither.	`{ enabled?: boolean; cell?: number; levels?: number }`	`{ enabled: false, cell: 3, levels: 8 }`
`interaction` 0 to 1 influence of the pointer and of scroll velocity.	`{ pointer?: number; scroll?: number }`	`{ pointer: 0.2, scroll: 0.1 }`
`maxDpr` Device pixel ratio cap for the canvas.	`number`	`1.5`
`reducedMotion` "respect" shows one still frame when the user prefers reduced motion.	`"respect" \| "ignore"`	`"respect"`
`className` Classes for the outer element. Size it here; the gradient fills it.	`string`	`—`