Skip to content

  • VisualizationPage · Index
  • What’s newPage · Latest additions
  • Styles indexPage · Home
  • Compare stylesPage · Side by side
  • Patterns indexPage · Index
  • Articles indexPage · Index
  • Folio design systemPage · House system
  • Folio FoundationsPage · House system
  • Folio ComponentsPage · House system
  • Folio PatternsPage · House system
  • Folio MotionPage · House system
  • Folio ExamplesPage · House system
  • Folio ButtonsPage · Component
  • Folio Text fieldsPage · Component
  • Folio SelectPage · Component
  • Folio Checkboxes & switchesPage · Component
  • Folio Radio groupsPage · Component
  • Folio TabsPage · Component
  • Folio MenusPage · Component
  • Folio DialogsPage · Component
  • Folio TooltipsPage · Component
  • Folio Breadcrumbs & paginationPage · Component
  • Folio CardsPage · Component
  • Folio Badges & avatarsPage · Component
  • Folio Data tablesPage · Component
  • Folio Progress & loadingPage · Component
  • Folio FeedbackPage · Component
  • Folio Empty statesPage · Component
  • Folio MediaPage · Component
← StylesCompare with another style

Aurora Gradient

The background becomes the design: soft fields of light, like the northern lights.

Launch poster

A luminous mesh field carries a restrained event identity, with grain preserving the smooth color transitions.

Product onboarding

The gradient sets the emotional register while a quiet foreground card keeps the interface legible.

Listening state

On a deep ground, color reads as emitted light and gives an ambient assistant state a clear center.

How it works

Color

Deep VioletMagentaRosePinkCoralSky

Typography

Inter
Space Grotesk
Manrope
Characteristics

Mesh, not linear

The defining move. A linear gradient fades along one line; a mesh places several color points across a surface and interpolates between them, so each point acts as its own light source and the color flows in every direction.

Soft multi-point blends

Three to five analogous colors bleed into one another with no hard boundary. Each point fades to transparent so the field reads as one continuous wash rather than stacked bands.

Luminous glow

Colors read as emitted light, not painted fill. The language used by the brands that adopted it is literally glow: Apple's active-Siri light and Asana's gradient meant to convey energy.

Drift and motion

The field often moves, slowly morphing between states. Stripe's gradient animates continuously on the GPU, and gates itself off when scrolled out of view to manage cost.

Grain against banding

Smooth gradients band into visible steps on 8-bit displays. A layer of fine noise, ideally applied as a displacement rather than a flat overlay, dithers the blend without dulling the color.

Dark glow or pastel wash

Two registers: glowing accent points on a deep dark ground, or a soft tint wash on light. The dark version is what makes aurora popular for dashboards and AI states.

Use it

Figma
Blur-blobs aurora field
  1. Draw 3 to 4 ovals in your aurora hues and overlap them.
  2. Select them and apply a large Layer blur, around 60 to 120.
  3. Drop their opacity so they bleed together into one field.
  4. Mask the group to your frame so the soft edges stay inside.

This is the manual version of the CSS filter: blur(60px) technique; it gives you full control over where each color sits.

Mesh gradient via plugin
  1. Run a mesh-gradient community plugin such as Aurora or Shape Blur Gradient.
  2. Drag the color points around until the field reads the way you want.
  3. Flatten to an image for handoff, or keep it editable.

Plugins give you a real grid of color points, closer to the Stripe look than overlapping blobs.

Grain overlay
  1. Place a noise texture over the gradient as a full-bleed layer.
  2. Set it to Overlay or Multiply at low opacity, around 4 to 10%.
  3. Increase the grain on flatter, lower-contrast areas where banding shows.

A noise PNG at low opacity is the Figma analog of an SVG turbulence filter.

Reusable aurora background
  1. Group the blobs, grain, and an optional glass panel into a component.
  2. Expose the blob colors as Variables so you can re-theme in one place.
  3. Build a light pastel and a dark glow variant from the same component.

Storing the colors as variables lets you swap a whole palette without touching the layout.

Starting points
  1. Choose 3 to 5 analogous colors that blend without muddying.
  2. Place them as soft points at the edges and corners of the field.
  3. Blur heavily so the points melt into one continuous wash.
Research notes & sources

2016 to present (named 2021)

Tech branding and product marketing on the web

Screens, brand identity & product UI

Aurora UI, Mesh Gradients, Gradient Mesh

Related styles

  • GlassmorphismAurora is the colorful field a frosted panel refracts. Both were named by Malewicz, who recommends using them together.
  • Retro-Futurism / Y2KThe holographic and iridescent dialect of aurora overlaps the chrome-and-oil-slick palette of the Y2K revival.
  • Flat DesignAurora is part of the swing back from flat minimalism: depth and glow returning to surfaces that flat design had stripped bare.
  1. Aurora UI: new visual trend for 2021Hype4 Academy
  2. Aurora UI: how to create with CSSalbertwalicki.com
  3. How To: Create the Stripe Website Gradient Effectkevinhufnagl.com
  4. How To create the Stripe Website Gradient Effectbram.us
  5. Apple introduces iPhone 16 and iPhone 16 Plus (Siri glow)Apple Newsroom
  6. Instagram Logo and the 2016 rebrandProduct London Design
  7. Teamwork is beautiful: Introducing Asana's new lookAsana
  8. Grainy GradientsFrontend Masters
  9. How to Create Mesh Gradient Backgrounds with CSSBetter Gradient
  10. A Deep CSS Dive Into Radial And Conic GradientsSmashing Magazine
  11. Glassmorphism in 2021Hype4 Academy
  12. 7 Signs a UI Has Been Vibe CodedThe Fountain Institute