Get started
All interface styles
Treatment
Pro

Aurora / Gradient mesh

Soft overlapping colour fields bleeding into each other behind an otherwise plain interface, giving atmosphere without adding structure.

Also called: gradient mesh, aurora gradient, blurred blobs, glow UI

Your Design Kit keeps

Colors, typefaces, the spacing scale, motifs, and brand voice.

Aurora / Gradient mesh changes

Surface material, borders, shape, depth, component layout, states, and motion.

Aurora / Gradient mesh specimen

Base components
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago
Aurora / Gradient mesh applied
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago

Look for: The mesh lives behind a quiet surface, never under the body text. Notice that the primary action glows with its own colour while the card stays plain — the atmosphere is a layer, not a treatment applied to everything.

Both panels use the same sample Design Kit and account screen. Only the interface style changes on the right.

Choose what to restyle

Select a scope to create a prompt for your coding agent. Start with one component family or apply the style across the interface.

Choose what the style should change
Apply Aurora / Gradient mesh to cards, panels, sheets, and modals only. Keep my Design Kit's colors, typefaces, and motifs. Leave navigation, forms, actions, and page structure unchanged. Show me one representative card first, then explain the accessibility trade-offs before changing the rest.
Paste this into your coding agent, then add any product-specific constraints.

What you see

The perceptual fingerprint, in the order you notice it.

  • Large diffuse colour blooms with no visible edge
  • Two or three hues melting into one another behind the content
  • Content sitting on quiet surfaces so the background can be loud
  • A subtle grain or noise layer preventing gradient banding
  • Glow rather than shadow around the primary action

Best for

  • AI, data and platform products that need atmosphere without imagery
  • Hero sections and empty states that would otherwise be blank
  • Brands with two or three strong hues and no photography budget

Avoid when

  • Text sits directly on the gradient — contrast becomes position-dependent
  • The interface is functional and dense; atmosphere reads as noise there
  • The kit has one hue only; a mesh needs at least two to be a mesh

Accessibility

Where this style tends to fail an audit, and what fixes it.

  • Contrast against a gradient must be measured at its lightest and darkest point under the text, not at its midpoint.
  • Animated meshes are background motion. They need `prefers-reduced-motion` handling and must never be the only cue for a state change.
  • Colour blooms can create apparent-motion discomfort at high saturation; cap alpha and keep any drift slower than 20s per cycle.

Built for

The site archetypes this render grammar suits. Each opens the catalog on that lane.

Matching design kits

A style is a render grammar. A design kit supplies the colour, type and personality it paints.

Saturated gradient-mesh light fields, glow and blur — vivid ambient backdrops (often the canvas glass floats on).

Implementation bundle

Pro

What an agent needs in order to actually build Aurora / Gradient mesh on top of your design kit — surface rules, per-component behaviour, responsive behaviour, fallbacks and QA.

Loading the implementation bundle…

Agent tags

The vocabulary a coding agent can match this style on.

  • gradient-mesh
  • radial-bloom
  • noise-overlay
  • glow-accent
  • atmospheric