Signature / Moleculestable

Gradient Mesh

Generative mesh gradient background using overlapping radial gradients.

@glinui/uiComponent: gradient-mesh

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add gradient-mesh

Usage$

Place GradientMesh inside a relative container. It renders overlapping blurred radial gradients that shift position via CSS animations.

Basic$

Mesh

TSX

1import { GradientMesh } from "@glinui/ui"
2
3export function GradientMeshDemo() {
4return (
5  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl bg-neutral-950">
6    <GradientMesh />
7    <span className="relative z-10 text-3xl font-bold text-white">Mesh</span>
8  </div>
9)
10}

Examples$

Custom Colors$

Warm

TSX

1import { GradientMesh } from "@glinui/ui"
2
3export function GradientMeshColorsDemo() {
4return (
5  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl bg-neutral-950">
6    <GradientMesh colors={["#f43f5e", "#f97316", "#eab308"]} intensity={0.5} />
7    <span className="relative z-10 text-2xl font-bold text-white">Warm</span>
8  </div>
9)
10}

Accessibility$

Renders with aria-hidden — invisible to assistive technologies.
Purely decorative; carries no semantic meaning.

Reduced Motion$

Mesh animations are paused via motion-reduce:[animation:none]. Static gradients remain visible.

API Reference$

Prop	Type	Required	Default	Description
`blur`	`number`	No	`60`	Blur intensity in px
`colors`	`string[]`	No	`["#a855f7", "#ec4899", "#6366f1", "#06b6d4"]`	Gradient color stops
`duration`	`number`	No	`10`	Animation duration in seconds
`intensity`	`number`	No	`0.6`	Overall intensity/opacity (0-1)

Source$

TSX

1import { GradientMesh } from "@glinui/ui"

packages/ui/src/components/gradient-mesh.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/gradient-mesh.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

GradientMeshProps

`GradientMeshProps`

Prop	Type	Required	Default	Description
`blur`	`number`	No	`60`	Blur intensity in px
`colors`	`string[]`	No	`["#a855f7", "#ec4899", "#6366f1", "#06b6d4"]`	Gradient color stops
`duration`	`number`	No	`10`	Animation duration in seconds
`intensity`	`number`	No	`0.6`	Overall intensity/opacity (0-1)