Animated background gradients with pure CSS
CSS JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Failed to load latest commit information.
css Fix autoprefixer build Jan 10, 2018
min Fix autoprefixer build Jan 10, 2018
scss Update _stars.scss Jul 31, 2017
.gitignore Clean gitignore Jul 26, 2016
LICENSE Initial commit Jul 26, 2016 Add Northern Warm gradient Aug 1, 2016
gulpfile.js Fix autoprefixer build Jan 10, 2018
index.html Fix typos in class names Jul 27, 2016
package.json Fix autoprefixer build Jan 10, 2018

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.


You can test all effects on the Auroral demo page.

#How to use

  1. 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>
  2. In the head of your html file, add auroral stylesheet. Of course, you can add minified version instead.

      <link rel="stylesheet" type="text/css" href="css/auroral.css"/>


      <link rel="stylesheet" type="text/css" href="css/auroral.min.css"/>
  3. 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;


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>

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.


Currently available backgrounds (class names to be used in your container):


The library is licensed under The MIT License (MIT).

Go to Lunar Logic website to learn more about us and our work.