Effect Background
Full-bleed effect backgrounds — radial glows, aurora dreams, and soft pastel washes.
A full-bleed atmospheric layer. Drop it as the first child of a relative overflow-hidden
container and your content sits above it. Pick a look below — 66 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/effect-background.json?variant=aurora-dream-corner-whispers"Usage
tsx
import { EffectBackground } from "@/components/godui/effect-background";
<div className="relative overflow-hidden">
<EffectBackground />
<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.