Gradient Background

Heroes 471

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