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

Aurora / Gradient mesh specimen

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.

Every style in this collection renders the same markup — one navigation row, one headline and action, one labelled input, a selected and an unselected control, a card with a status and a data row, and a secondary action. Colour and type come from the active design kit; the style decides the rendering.

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