Skip to content
Docs
Moving Gradient

Moving Gradient

Animated moving gradient background

requires config
Loading...

Installation

CLI

pnpm dlx shadcn@latest add https://animata.design/r/background/moving-gradient.json

Manual

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.tsx

Paste 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

Edit this page on GitHub
Interactive GridShooting Stars