Gradient Background
Full-bleed gradient backgrounds — radial glows, aurora washes, and depth fades.
A full-bleed gradient layer. Drop it as the first child of a relative overflow-hidden
container and your content sits above it. Pick a look below — 48 gradients ported from
PatternCraft. The component itself just takes background,
backgroundImage, and backgroundSize; the picker fills them in.
pnpm dlx shadcn@latest add "https://godui.design/r/gradient-background.json?variant=dark-radial-glow"Usage
tsx
import { GradientBackground } from "@/components/godui/gradient-background";
<div className="relative overflow-hidden">
<GradientBackground />
<YourContent />
</div>Props
The component bakes the selected variant's full style. It takes no custom props —
just the standard div attributes.
| Prop | Type | Description |
|---|---|---|
style | CSSProperties | Supply your own background. Setting any background key (background, backgroundImage, backgroundColor, …) replaces the baked default entirely. |
className | string | Extra classes on the layer (it is absolute inset-0 z-base). |
All other div attributes are forwarded.