Background Gradient
Animated gradient background with smooth color transitions.
Preview
Background Gradient
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Card backgrounds and section dividers across IO pages.
Why this component matters
Earn every pixel. A gradient that shifts subtly creates perceived depth and polish without adding visual weight.
Usage guidance
Best used as a card background or contained section. Avoid covering the entire viewport — constrain it to draw the eye to a specific area.
Installation
bash
npx shadcn@latest add @aceternity/background-gradientUsage
example.tsxtsx
import { BackgroundGradient } from "@/components/ui/background-gradient";
export default function Example() {
return (
<BackgroundGradient>
{/* Your content here */}
</BackgroundGradient>
);
}Source
background-gradient.tsx
components/ui/background-gradient.tsx