Gradient Mesh

A mesh gradient background — four to five soft radial-gradient color points drift slowly via transform, weaving into a flowing mesh.

Loading preview…

npx shadcn@latest add https://webberui.com/r/gradient-mesh.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Drift speed multiplierspeed

<GradientMesh />

Installation

npx shadcn@latest add https://webberui.com/r/gradient-mesh.json

Or, once registries are configured in components.json, install it as @webberui/gradient-mesh.

Usage

Put your foreground content in children, and write the layout (centering, height) on className:

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

<GradientMesh className="flex min-h-[400px] items-center justify-center">
  <h1 className="text-4xl font-bold">Hero heading</h1>
</GradientMesh>

Custom colors and drift speed:

<GradientMesh
  colors={["#f0abfc", "#c4b5fd", "#7dd3fc", "#6ee7b7"]}
  speed={1.5}
  className="flex h-[320px] items-center justify-center rounded-2xl"
>
  <p className="text-lg">A faster, pinker mesh</p>
</GradientMesh>

Props

Prop	Type	Default	Description
`colors`	`string[]`	Soft multicolor palette	Mesh point colors, mapped in order to each point and cycled when there are not enough
`speed`	`number`	`1`	Drift speed multiplier — higher flows faster (the period is divided by this value)
`children`	`React.ReactNode`	—	Foreground content, layered above the mesh
`className`	`string`	—	Appended to the outermost container's className

How it works

Performance: transform only. Every point drifts via x / y, never touching top / left, so neither layout nor paint is triggered; will-change is managed automatically by Motion during the animation, so you never set it by hand
Each point's x and y axes use different periods (12s–22s) paired with repeat: Infinity + repeatType: "mirror". With the two axes offset from each other, each point traces an arc, and the five points never sync up — the result reads as a naturally flowing mesh
The points are blur-3xl radial-gradient circles — the blur is composited once by the GPU and then translated by transform, so its cost is fixed and does not accumulate over the animation
The whole background layer is pointer-events-none and sits at -z-10 beneath the content (the container has isolate to create its own stacking context), so foreground interaction is completely unaffected
speed is guarded: non-positive values fall back to 1, so the period never becomes Infinity or runs in reverse
The base color is neutral-50 / neutral-950, so the mesh stays crisp and easy on the eyes in both light and dark mode

Accessibility

The background layer carries aria-hidden — it is decorative only, so it does not interfere with assistive technology
When the user has "reduce motion" enabled at the system level, all points stop drifting and render as static gradients, with no change to the DOM structure