Gradient Mesh
A free animated mesh gradient background for premium dark sections.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- CSS and React
- No runtime packages
Gradient Mesh is a free animated background component for Next.js and React that layers four large radial colour fields, anchored near the four corners, into one continuous mesh gradient behind your content. It is driven by plain CSS keyframes, styled with Tailwind, and renders as an absolutely positioned fill layer that you drop inside any relative container.
Each field breathes on its own slow cycle, a gentle scale and a few degrees of rotation on desynchronised 16 to 26 second durations, so the mesh never repeats visibly. Every movement is a GPU-friendly transform, and a static dithered noise overlay stops the soft falloff banding on dark screens. The layer is decorative and ignores pointer events, an IntersectionObserver pauses the breathing while it is fully offscreen, and with prefers-reduced-motion enabled the mesh renders as a static gradient field with zero movement.
Template Empire
Four corners of colour, one continuous field
Four radial colour fields stay pinned to the corners and breathe slowly behind this text, each on its own desynchronised cycle, while a static noise overlay keeps the falloff smooth on dark screens. The layer never intercepts a click, never moves the layout, and goes completely still when you prefer reduced motion.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/bg-gradient-meshUsage
import { BgGradientMesh } from "@/components/bg-gradient-mesh";
export function Example() {
return (
<section className="relative overflow-hidden">
<BgGradientMesh />
<div className="relative">
<h2 className="text-4xl font-semibold">Your content here</h2>
<p className="text-muted">The mesh breathes behind it.</p>
</div>
</section>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | undefined | Additional classes merged onto the root fill layer. |
Customisation
Gradient Mesh exposes four component tokens, declared in its registry item: --mesh-1, --mesh-2, --mesh-3 and --mesh-4 for the four corner anchor colours, defaulting to the brand, accent and neutral ramps. Override them from :root, or on any ancestor of the component, to retheme without touching the code:
:root {
--mesh-1: var(--color-accent-400);
--mesh-2: var(--color-brand-400);
--mesh-4: var(--color-brand-600);
}Frequently asked questions
- Is Gradient Mesh free for commercial use?
- Yes. Gradient Mesh is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does Gradient Mesh affect performance or accessibility?
- The breathing animates transforms only, a slow scale and rotation per field, so the browser compositor does the work. The loop pauses automatically while the component is fully offscreen. The layer is aria-hidden, never receives pointer events or focus, and with reduced motion enabled it renders completely static while staying fully visible.
- How do I change the mesh colours?
- Override the CSS custom properties --mesh-1 to --mesh-4 from :root or any ancestor element. Each maps to one corner anchor and defaults to a token from the library colour system, so the four fields keep blending into a continuous mesh whatever colours you choose.