Section background
A soft radial gradient anchored to the bottom edge.
---
import { Gradient } from "@/components/ui/gradient"
---
<div class="bg-card relative isolate h-64 overflow-hidden rounded-lg border">
<Gradient class="opacity-20" />
<div class="relative z-10 flex h-full items-end p-6">
<div>
<p class="text-sm font-medium">Section background</p>
<p class="text-muted-foreground mt-1 text-sm">
A soft radial gradient anchored to the bottom edge.
</p>
</div>
</div>
</div>Installation
npx shadcn@latest add @fulldev/gradientUsage
import { Gradient } from "@/components/ui/gradient"<div class="relative overflow-hidden">
<Gradient />
<div class="relative z-10">
<!-- Content -->
</div>
</div>The component renders an absolutely positioned decorative layer. Place it in a relative parent and keep foreground content above it with normal stacking.
Examples
Linear
Use variant="linear" for edge fades and image overlays.
Linear overlay
Useful when content needs more contrast over media.
---
import { Gradient } from "@/components/ui/gradient"
---
<div class="bg-card relative isolate h-56 overflow-hidden rounded-lg border">
<Gradient
variant="linear"
direction="top"
class="bg-background opacity-90 [--gradient-stops:black,transparent_70%]"
/>
<div class="absolute inset-x-0 bottom-0 z-10 p-6">
<p class="text-sm font-medium">Linear overlay</p>
<p class="text-muted-foreground mt-1 text-sm">
Useful when content needs more contrast over media.
</p>
</div>
</div>Direction
Control where the gradient is anchored with direction.
Left
Right
---
import { Gradient } from "@/components/ui/gradient"
---
<div class="grid gap-4 sm:grid-cols-2">
<div class="bg-card relative isolate h-44 overflow-hidden rounded-lg border">
<Gradient direction="left" class="opacity-25" />
<div class="relative z-10 p-5 text-sm font-medium">Left</div>
</div>
<div class="bg-card relative isolate h-44 overflow-hidden rounded-lg border">
<Gradient direction="right" class="opacity-25" />
<div class="relative z-10 p-5 text-sm font-medium">Right</div>
</div>
</div>Custom Stops
Override --gradient-stops and background color to shape the mask.
Center glow
---
import { Gradient } from "@/components/ui/gradient"
---
<div class="bg-card relative isolate h-56 overflow-hidden rounded-lg border">
<Gradient
direction="center"
class="bg-accent opacity-20 [--gradient-stops:black,transparent_55%]"
/>
<div
class="relative z-10 flex h-full items-center justify-center p-6 text-sm font-medium"
>
Center glow
</div>
</div>API Reference
Gradient
Use Gradient to add a non-interactive decorative gradient layer.
| Prop | Type | Default |
|---|---|---|
variant | "radial" | "linear" | "radial" |
direction | "left" | "right" | "top" | "bottom" | "center" | "bottom" |
class | string |
See the GitHub source code for more information on props.