Cool CSS Backgrounds: The Aurora Effect

This isn't your mama's Borealis

Nick Shotts CSS, How-To

Notice how our header, footer, and other elements of our website feature a colorful, aurora-like background effect? While it might look slightly complicated to those that are new to CSS, it’s actually quite simple – both in HTML and CSS. The animated background effect uses no JavaScript. You can add this to your site by creating inner and outer container elements and applying the appropriate “aurora-outer” and “aurora-inner” classes and CSS. Check out the aurora effect in our pen below.

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.