Docs
Moving Gradient
Animated moving gradient background
requires config
Loading...
Installation
CLI
pnpm dlx shadcn@latest add https://animata.design/r/background/moving-gradient.jsonManual
Add to your CSS
@keyframes bg-position {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@theme {
--animate-bg-position: bg-position 3s infinite alternate;
}Run the following command
It will create a new file called moving-gradient.tsx inside the components/animata/background directory.
mkdir -p components/animata/background && touch components/animata/background/moving-gradient.tsxPaste the code
Open the newly created file and paste the following code:
import type { ComponentPropsWithoutRef } from "react";
import { cn } from "@/lib/utils";
interface MovingGradientProps extends ComponentPropsWithoutRef<"div"> {
animated?: boolean;
gradientClassName?: string;
}
export default function MovingGradient({
children,
className,
animated = true,
gradientClassName,
...props
}: MovingGradientProps) {
const backgroundClassName = "pointer-events-none absolute h-full w-full";
return (
<div {...props} className={cn("relative overflow-hidden bg-white", className)}>
<div
className={cn(
"bg-size bg-linear-to-r from-yellow-500 from-30% via-yellow-700 via-50% to-pink-500 to-80% opacity-15",
{
[backgroundClassName]: true,
"animate-bg-position bg-[length:300%_auto]": animated,
},
gradientClassName,
)}
/>
<div className={cn(backgroundClassName, "z-1 blur-lg")} />
{children}
</div>
);
}Credits
Built by hari