Animated background gradients with pure CSS
CSS JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
css Add Northern Warm gradient Aug 1, 2016
.gitignore Clean gitignore Jul 26, 2016
index.html Fix typos in class names Jul 27, 2016
package.json Add directory structure and first gradients Jul 26, 2016

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.