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)