Home > Animation > Auroral.css – Animated Gradient Background In Pure CSS
Auroral.css – Animated Gradient Background In Pure CSS

Auroral.css – Animated Gradient Background In Pure CSS

The Auroral.css library allows to create smooth animated gradient background using CSS3 transitions, transforms and animations.

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>
    </section>
  2. 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>
  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;
    }
  Website Demo

About admin