backgrounds

GradientMesh

Multi-color animated gradient background using CSS radial-gradient blobs with blur for a soft mesh effect.

v1.0.0react >=18next >=14tailwind >=4

backgroundgradientmeshblurdecorativeanimated

Preview

Loading preview...

Props

Prop	Type	Default	Description
`colors`	`string[]`	`["#ee502c", "#f97316", "#8b5cf6", "#06b6d4"]`	Array of CSS color values for gradient blobs
`speed`	`number`	`8`	Animation cycle duration in seconds
`blur`	`number`	`80`	Blur amount in pixels for the soft mesh effect
`className`	`string`	`—`	Additional Tailwind classes
`id`	`string`	`—`	HTML id attribute

Layout

Display: block

Responsive: No

Fills container with absolute positioning and overflow hidden. Requires a relative-positioned parent.

Examples

Basic usage

<div className="relative h-screen bg-black">
  <GradientMesh />
  <div className="relative z-10 flex items-center justify-center h-full">
    <h1 className="text-white text-5xl font-bold">Hero Title</h1>
  </div>
</div>

Custom brand colors

<div className="relative h-96 bg-neutral-950">
  <GradientMesh colors={["#3b82f6", "#8b5cf6", "#ec4899"]} speed={12} />
</div>

Subtle, slow mesh

<div className="relative h-96 bg-black">
  <GradientMesh blur={120} speed={20} colors={["#1e3a5f", "#2d1b4e"]} />
</div>

AI Usage Hint

Use GradientMesh for rich, organic background gradients. Place behind hero sections. Pass brand colors. Adjust speed (seconds per cycle) and blur (softness). Pair with dark overlays and light text.

Works Well With

DotGridGridPattern