Background Gradient Animation
Full-page animated gradient background with complex color blending.
Preview
Background Gradient Animation
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Full-bleed hero sections and landing page backgrounds.
Why this component matters
Sets mood and atmosphere for high-impact first impressions. The animation is slow enough to feel ambient, not distracting.
Usage guidance
Reserve for hero sections and key landing moments. Only one animated gradient per page. Layer semi-transparent content over it.
Installation
bash
npx shadcn@latest add @aceternity/background-gradient-animationUsage
example.tsxtsx
import { BackgroundGradientAnimation } from "@/components/ui/background-gradient-animation";
export default function Example() {
return (
<BackgroundGradientAnimation>
{/* Your content here */}
</BackgroundGradientAnimation>
);
}Source
background-gradient-animation.tsx
components/ui/background-gradient-animation.tsx