Auroral - Animated background gradients
Auroral is a collection of animated background gradients, that can be used almost anywhere. They are built with pure CSS. To learn how it works, read the article.
Demo
You can test all effects on the Auroral demo page.
#How to use
-
Include a container for a background inside a wanted element. It needs to have one of the auroral classes.
<section class="your-container"> <div class="auroral-northern"></div> </section>
-
In the head of your html file, add auroral stylesheet. Of course, you can add minified version instead.
<head> <link rel="stylesheet" type="text/css" href="css/auroral.css"/> </head>
Or:
<head> <link rel="stylesheet" type="text/css" href="css/auroral.min.css"/> </head>
-
Make sure, that your container (the one in which you put the auroral container) has these rules in CSS:
.your-container { display: block; // if it is not a block element position: relative; overflow: hidden; }
Stars!
What is a night sky without the stars? Add them by appending an element with the auroral-stars class right after the auroral container:
<section class="your-container">
<div class="auroral-northern"></div>
<div class="auroral-stars"></div>
</section>If you know how to use Sass you can play with the $star-number variable, to make sure there is a right amount of them! It sits in _stars.scss partial.
#Backgrounds
Currently available backgrounds (class names to be used in your container):
- auroral-northern (Northern Lights style),
- auroral-northern-intense (Intense Northern Lights),
- auroral-northern-dimmed (Delicate Northern Lights),
- auroral-northern-dusk (Delicate Northern Lights spin-off),
- auroral-northern-warm (Warm Northern Lights),
- auroral-agrabah (Inspired by the colors of the night sky in Aladdin :D).
License
The library is licensed under The MIT License (MIT).
Go to Lunar Logic website to learn more about us and our work.