Gradient Mesh

Four drifting blurred blobs plus an SVG grain overlay. Renders on the server, costs nothing at runtime, and gets most of the way to a WebGL mesh gradient.

Backgrounds

backgroundgradientmeshcss-only

Pure CSS

Mesh Gradient

Usage

Drop the file into your project and import it. There is no package to install.

usage.tsx

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

export function Example() {
  return <GradientMesh />;
}

Install prerequisites

Every component here relies only on Tailwind and the cn helper from shadcn/ui.

terminal

npm i clsx tailwind-merge

More in Backgrounds

Gradient Border

A card wrapped in a 1px brand gradient ring using a padding-box trick — no extra DOM layers or mask hacks.

Dot Pattern

A subtle radial-dot background for empty states, hero sections and preview frames. Pure CSS, no image asset.