Components
Loading preview...
A smooth and elegant background gradient animation that changes the gradient position over time.
@aceternity
npx shadcn@latest add https://21st.dev/r/aceternity/background-gradient-animationimport React from "react";
import { BackgroundGradientAnimation } from "@/components/ui/background-gradient-animation";
export function BackgroundGradientAnimationDemo() {
return (
<BackgroundGradientAnimation>
<div className="absolute z-50 inset-0 flex items-center justify-center text-white font-bold px-4 pointer-events-none text-3xl text-center md:text-4xl lg:text-7xl">
<p className="bg-clip-text text-transparent drop-shadow-2xl bg-gradient-to-b from-white/80 to-white/20">
Gradients X Animations
</p>
</div>
</BackgroundGradientAnimation>
);
}