DEV Community

Cover image for CSS Aurora effect
Spencer
Spencer

Posted on • Updated on

CSS Aurora effect

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

Overall, this was a really fun experiment that demonstrates the creative possibilities of CSS. It's always exciting to see what can be done with a little bit of coding knowledge and a lot of imagination. Who knows, maybe a company like Apple will pick up on this effect and use it for a landing page or something similar in the future. In the meantime, why not play around with the CSS Aurora effect and see what you can create?

Top comments (0)