shadcn-extras

Gradient Mesh Generator

Create stunning, animated gradient backgrounds using blended blobs. Perfect for hero sections and feature highlights.

Blob 1
Blob 2
Blob 3
<div className="relative w-full h-full overflow-hidden" style={{ backgroundColor: "#0f172a" }}>
  <div 
    className="absolute rounded-full mix-blend-multiply filter opacity-70 animate-blob"
    style={{
      backgroundColor: "#ec4899",
      top: "10%",
      left: "20%",
      width: "300px",
      height: "300px",
      filter: "blur(100px)",
      animationDelay: "0s",
      animationDuration: "20s",
    }}
  />
  <div 
    className="absolute rounded-full mix-blend-multiply filter opacity-70 animate-blob"
    style={{
      backgroundColor: "#8b5cf6",
      top: "40%",
      left: "60%",
      width: "350px",
      height: "350px",
      filter: "blur(100px)",
      animationDelay: "2s",
      animationDuration: "18s",
    }}
  />
  <div 
    className="absolute rounded-full mix-blend-multiply filter opacity-70 animate-blob"
    style={{
      backgroundColor: "#3b82f6",
      top: "70%",
      left: "30%",
      width: "250px",
      height: "250px",
      filter: "blur(100px)",
      animationDelay: "4s",
      animationDuration: "25s",
    }}
  />
</div>

Note: Ensure you have `animate-blob` defined in your `tailwind.config.ts` for animations to work.

Installation

To support the animation, add the following CSS to your app/globals.css file within the @theme inline block (or @theme block):


/* app/globals.css */
@theme inline {
/* ... existing variables ... */
--animate-blob: blob 10s infinite;
@keyframes blob {
0% {
transform: translate(0px, 0px) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
100% {
transform: translate(0px, 0px) scale(1);
}
}
}

Features

  • Animated Blobs: Floating blobs that create a dynamic "lava lamp" or "Aurora" effect.
  • Customizable: Adjust position, color, size, and blur for each blob.
  • Mix Blend Modes: Uses mix-blend-multiply for beautiful color blending (best on dark backgrounds).
  • Interactive Preview: Real-time updates as you tweak parameters.

Usage

Copy the generated JSX and paste it into your component. Ensure the parent container has relative position and defined dimensions.


<div className='relative h-96 w-full overflow-hidden bg-slate-950'>
{/* Blobs go here */}
</div>