127 Components
Mesh Gradient
BackgroundsApple Music and macOS-inspired fluid multi-point mesh gradient where 5 color nodes orbit on independent trajectories and blend seamlessly.
Mesh Gradient · Apple Music
Fluid Multi-Point Mesh
Five color control points orbiting smoothly on independent CSS trajectories and blended with a 70px Gaussian diffusion filter.
5 Control Points · 70px Blur
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/mesh-gradient.json"
Props
TypeScript props supported by <MeshGradient />.
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#FF2D55", "#5856D6", "#FF9500", "#AF52DE", "#00C7BE"] | Array of 4 to 5 hex colors for the mesh nodes. |
| speed | number | 1 | Orbit animation speed multiplier. |
| blur | number | 70 | Gaussian blur radius in pixels used to fuse the color points. |
| grain | boolean | true | Overlays a subtle film grain texture. |
| children | React.ReactNode | — | Optional foreground content rendered above the mesh. |
| className | string | — | Additional Tailwind CSS classes for the container. |
Key Features
- Blends 5 orbiting color control points using high-radius Gaussian blur and saturation boost.
- Includes Apple Music, Sequoia, and Obsidian palette presets in the interactive preview.
- Optional micro-grain overlay to prevent color banding on 8-bit displays.
Keyboard & Accessibility
- Marks decorative mesh control points and grain layers with `aria-hidden='true'`.
- Maintains readable foreground typography with subtle backdrop blur badges.
- Palette switcher buttons support keyboard navigation.