Mesh Gradient Background

Component 11

About

An animated mesh gradient background with soft color blobs that slowly drift across the frame, ideal for hero sections and video-style backdrops.

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

Code

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

Usage.tsx

"use client";

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

const settings = {
  width: 1280,
  height: 640,
};

export default function MeshGradientBgDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="flex min-h-svh w-full items-center justify-center bg-background p-6">
      <div className="relative aspect-[2/1] w-full max-w-3xl overflow-hidden rounded-2xl border shadow-sm">
        <MeshGradientBg
          width={s.width}
          height={s.height}
          className="h-screen w-screen"
        />
        <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-3 px-6 text-center">
          <span className="text-xs font-medium uppercase tracking-[0.2em] text-white/70">
            Environment
          </span>
          <h2 className="text-3xl font-semibold text-white sm:text-4xl">
            Mesh Gradient Background
          </h2>
          <p className="max-w-sm text-sm text-white/70">
            Living gradient with amorphous color blobs slowly drifting across
            the frame.
          </p>
        </div>
      </div>
    </div>
  );
}