← Back to catalog📄 Implementation guide
Background

Mesh Gradient

Uses soft blended color blobs to create a rich abstract background.

Premium, trendy, creative

Professional
Casual
Exotic
Visual impact
Difficulty
Performance cost

Best use: SaaS, AI, design brands

Brand backdrops, generated

Backgrounds that feel
like your brand.

Spectra blends six colour stops into a living mesh gradient, then re-tunes the whole field to any palette in your design system — no two renders alike.

Live palette · Nebula — tap to recolour the mesh

Technique: stacked radial-gradient() blobs on two oversized, blur()-ed, counter-drifting layers (transform + mix-blend-mode: screen), recoloured live through @property <color> custom properties