2021-Present — Era

Aurora Backgrounds

Degradados animados y etéreos.

Aurora Backgrounds (or Aurora Gradients) mimic the natural phenomenon of the Aurora Borealis (Northern Lights). They feature soft, blurred splashes of color that drift, blend, and morph into one another. Unlike the sharp, linear gradients of the 2010s, Aurora backgrounds are organic and atmospheric. They provide a calming, ethereal backdrop that adds visual interest without distracting from the foreground content.

The Softening of the Web

This trend emerged alongside Glassmorphism and the general move towards “Soft UI.” As interfaces became friendlier and more approachable, backgrounds needed to match. Solid colors felt too harsh. Standard gradients felt too corporate. Aurora gradients, with their irregular shapes and high levels of blur, felt natural and human.

They are often created using multiple radial gradients with high transparency and blur values, layered on top of each other and animated using CSS keyframes or JavaScript.

Emotional Impact

Colors have a profound effect on mood. Aurora backgrounds leverage this by using soothing, harmonious palettes—often teals, purples, and pinks. The slow, drifting animation mimics the rhythm of breathing or the movement of clouds, creating a subconscious calming effect on the user.

Versatility

One of the strengths of this style is its versatility. It works well in both light and dark modes. In light mode, it feels airy and fresh. In dark mode, it feels glowing and mysterious. It pairs exceptionally well with frosted glass elements, as the shifting colors behind the blur create a beautiful, refractive effect.

It is a subtle way to add “delight” to a design without the performance cost of heavy 3D assets or video backgrounds.

Key Characteristics

  1. High Blur: Shapes are indistinct and merge seamlessly.
  2. Organic Motion: Movement is slow, fluid, and non-linear.
  3. Multiple Light Sources: Colors appear to emanate from different points.
  4. Atmospheric: Creates a sense of depth and mood.
  5. Subtlety: Designed to sit in the background, not compete for attention.