Cool CSS Backgrounds: The Aurora Effect
This isn't your mama's Borealis
See the Pen Aurora Background Effect by Nick (@shottsn) on CodePen.
What’s going on here?
If you’re familiar with CSS animations, you can go ahead and skip this part. To create the our aurora background effect, we’re using CSS keyframes to animate the background positions of both of our containers from corner to corner. The outer container uses a colored, linear gradient to define the colors, while the inner container uses a radial gradient of semi-transparent white to apply a tinting effect. The animation durations are different to create a more inconsistent and natural animation. Together, we get a lively, colorful background effect that can be applied pretty much anywhere on your website.
Customize for your site
To adjust the color of your aurora effect, change the hex colors defined in “aurora-outer” to your liking. You can also use semi-transparent blacks – or even colors – instead of whites in the inner container to modify the background effect for your site. Gradient below inspired by uiGradients’ Wedding Day Blues gradient.
See the Pen Aurora Background Effect 2 by Nick (@shottsn) on CodePen.