UI Lingo
Shortlist 0

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.

“Grainy mesh”Futuristic & TechEra: 2023 → todayDreamyLuxuryBoldFriendly
Open full screen ↗
gradient-mesh-aurora-evolved / landingEN
gradient-mesh-aurora-evolved / landingTH
Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Colours · Light

    Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

    This recipe redefines text-muted, border, success, chart-1, chart-2 in its own rules, so edits to those colours may show only in part.

    Design keywords

    Say these words to ask for this style.

    mesh gradient fillfilm grain noisegradient inside cardsgradient headline textpeach coral lilac cobaltink black buttonspaper white pagecredit-card tiles

    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

    Aurora UI →Aurora keeps smooth blurred light ribbons behind a dark UI; Gradient Mesh uses crisp grainy multi-point gradients as a material inside cards and letters on a light page.Glassmorphism →Glassmorphism shows colour through frosted translucent panels; Gradient Mesh panels are opaque objects filled with the gradient itself.Y2K Aesthetic →Y2K uses chrome, bubble shapes and iridescent sheen; Gradient Mesh is matte, grainy and editorial with flat ink type.

    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.

    Audit
    ✓ Passed
    Rounds
    2
    Builder
    unknown
    Auditor
    unknown
    Copied!
    ↑ ↓ to move · Enter to open · Esc to close