Gradient Mesh

Heroes 5

About

An animated, atmospheric gradient-mesh background made of blurred radial gradients for dark, premium-looking interfaces.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Gradient Mesh to your project and fits it to your theme.

Code

How Gradient Mesh is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { GradientMesh } from "@/components/ui/gradient-mesh";

export default function GradientMeshDemo() {
  return (
    <div className="relative w-full h-screen bg-background overflow-hidden">
      <GradientMesh
        primary="#9b7cff"
        secondary="#587dff"
        accent="#ff76d8"
        background="#0d0d11"
        blur={80}
        speed={1}
      />
    </div>
  );
}

Gradient Mesh

Code

More in Heroes

SaaS Template

Hero

Centered Hero with Image Fan

Responsive Hero Banner

Editorial Collage Hero

Minimalist Hero Fashion

Aero Hero-3

Glass Fold

Explore more