CSS Aurora effect

Spencer — Mon, 02 Jan 2023 22:28:38 +0000

I was experimenting with color for another post and was inspired by the text glow effects on Open Props. This got me wondering if I could animate an Aurora Borealis affect.

The basic aurora glow

The simpler approach is a stack of CSS gradients (simulating a mesh gradient) and animating the background positions of each layer. See the Pen below.

I think an important, though subtle part of this effect is the text glow as well. It sets the text in the environment and is affected by the aura behind it.

Going a step farther

The next experiment alters the text so it interacts with the background, fading in and out of focus as if it's within the aurora.

The text's aurora

In this experiment, the effect is more subtle. I think this may be the most applicable for real use-case. Even if you turn off the animations it still looks
pretty nice.

My mind's eye?

This effect where the text appears to emit its own aurora is probably the closest to what I had originally imagined, but it may not be the most realistic in terms of achieving a natural look.

To achieve this I animated 4 text shadows modifying their x & y offsets, blur radii, and positions in the stack.

Wrapping up