Gradient Background

Heroes 58

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Gradient Background to your project and fits it to your theme.

Code

How Gradient Background is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { 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>
	);
}