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 CustomColorsDemo() {
// Ocean vibes
const oceanGradients = [
'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
];
return (
<GradientBackground
gradients={oceanGradients}
animationDuration={8}
overlay={true}
overlayOpacity={0.2}
animationDelay={0}
>
<div className="max-w-4xl px-6 text-center text-white">
<h2 className="mb-4 text-7xl font-extrabold">Custom Colors</h2>
<p className="text-2xl text-blue-100">
Customize the colors to match your brand or mood
</p>
</div>
</GradientBackground>
);
}