Skip to content
Docs
Blurry blob

Blurry blob

Animated blurry blob background

Loading...

Installation

CLI

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

Manual

Add to your CSS

@keyframes pop-blob {
  0% { transform: scale(1); }
  33% { transform: scale(1.2); }
  66% { transform: scale(0.8); }
  100% { transform: scale(1); }
}
@theme {
  --animate-pop-blob: pop-blob 5s infinite;
}

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
Animated BeamBoids Ecosystem