Decorative Background
Full-bleed decorative backgrounds — radial and corner gradient washes.
A full-bleed decorative wash. Drop it as the first child of a relative overflow-hidden
container and your content sits above it. Pick a look below — 44 patterns 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/decorative-background.json?variant=top-gradient-radial"Usage
tsx
import { DecorativeBackground } from "@/components/godui/decorative-background";
<div className="relative overflow-hidden">
<DecorativeBackground />
<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.