Components
Loading preview...
A smooth, looping gradient background powered by Framer Motion, with optional overlay and center-aligned content. Perfect for creating vibrant hero sections, landing pages, or fullscreen app backdrops.
npx shadcn@latest add https://21st.dev/r/sshahaider/gradient-backgroundimport { GradientBackground } from "@/components/ui/gradient-background";
export default function DefaultDemo() {
return (
<GradientBackground className="flex min-h-screen items-center justify-center">
<div className="space-y-6 px-4 text-center text-white">
<h1 className="text-4xl font-extrabold md:text-5xl">
Animated Gradients Background
</h1>
</div>
</GradientBackground>
);
}