Gradient Background

tsx

Documentation

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.

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/gradient-background.json"

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.