Gradient Mesh / Aurora Evolved
Also called: Mesh gradient, Grainy gradient, Aurora 2.0
Multi-point mesh gradients with film grain, poured into cards, headlines and payment cards on a calm paper-white page.
Design keywords
Say these words to ask for this style.
Gradient Mesh is the grown-up evolution of aurora backgrounds: instead of a blurred sky behind everything, rich 4–6 point mesh gradients (peach, coral, lilac, cobalt, mint) are used as a material — filling a hero card, a credit card, a KPI tile or the letters of a headline — and always carry a fine film-grain noise so they feel printed and tactile rather than digital. Around them the UI stays quiet: warm off-white paper, ink-black type and buttons, generous rounded corners.
Best for
- Fintech cards, wallets and neobanks
- Brand and product launch pages
- Pricing and plan highlights
- Creator and design-tool marketing
Avoid for
- Dense admin tools with many equal cards
- Strictly corporate or government sites
- Low-end devices if meshes are animated
✓ Do
- Use the mesh on 1–3 hero objects per view, not every surface
- Always overlay fine grain (effective ~15–25%) so gradients don’t band
- Put ink text (#14121A) on pastel mesh and keep it ≥ 4.5:1
- Vary the mesh focal points per card so each feels unique
✕ Don't
- Don’t blur the mesh into a vague background (that is Aurora)
- Don’t use a smooth two-stop linear gradient — it must have 4+ colour points
- Don’t add glassmorphism blur on top of mesh cards
- Don’t put white text on light peach/lilac areas
Not to be confused with
On mobile
The mesh becomes the hero object of each screen — the balance card, onboarding art and the active tab dot — while lists stay plain white. Bake meshes into static gradients (no animation) and keep the grain as a tiny tiled SVG.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.