Docs
Blurry blob

Blurry blob

Animated blurry blob background

Installation

Update tailwind.config.js

theme: {
    extend: {
      keyframes: {
          "pop-blob": {
          "0%": { transform: "scale(1)" },
          "33%": { transform: "scale(1.2)" },
          "66%": { transform: "scale(0.8)" },
          "100%": { transform: "scale(1)" },
        },
        colors: {
         filter: {
        "blur-20": "blur(20px)",
        "blur-25": "blur(25px)",
         },
        }
      },
    },
  },

Run the following command

It will create a new file called blurry-blob.tsx inside the components/animata/background directory.

mkdir -p components/animata/background && touch components/animata/background/blurry-blob.tsx

Paste the code

Open the newly created file and paste the following code:

import { cn } from "@/lib/utils";
interface BlobProps extends React.HTMLAttributes<HTMLDivElement> {
  firstBlobColor: string;
  secondBlobColor: string;
}
 
export default function BlurryBlob({
  className,
  firstBlobColor,
  secondBlobColor,
}: BlobProps) {
  return (
    <div className="min-h-52 min-w-52 items-center justify-center">
      <div className="relative w-full max-w-lg">
        <div
          className={cn(
            "absolute -right-24 -top-28 h-72 w-72 animate-pop-blob rounded-sm bg-blue-400 p-8 opacity-45 mix-blend-multiply blur-3xl filter",
            className,
            firstBlobColor,
          )}
        ></div>
        <div
          className={cn(
            "absolute -left-40 -top-64 h-72 w-72 animate-pop-blob rounded-sm bg-purple-400 p-8 opacity-45 mix-blend-multiply blur-3xl filter",
            className,
            secondBlobColor,
          )}
        ></div>
      </div>
    </div>
  );
}

Credits

Built by Laxmi Lamichhane

Edit this page on GitHub
Best practicesDiagonal Lines