DocsComponentsBlog
Star us
Docs

Moving Gradient

Animated moving gradient background

requires config

Installation

Update tailwind.config.js

theme: {
    extend: {
     keyframes: {
          "bg-position": {
          "0%": { backgroundPosition: "0% 50%" },
          "100%": { backgroundPosition: "100% 50%" },
        },
     }
    },
  },

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 { 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-gradient-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 GridZigzag