Animated Gradient Background In Pure CSS – Auroral.css

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

How to use it:

Download and insert the auroral.css or auroral.min.css into the header of the webpage.

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

Apply the following CSS rules to your container element.

.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

Add the ‘auroral-northern’ effect to the background.

<div class="container">
  <div class="auroral-northern"></div
</div>

All available gradient background effects (CSS classes).

• auroral-northern
• auroral-northern-intense
• auroral-northern-dimmed
• auroral-northern-dusk
• auroral-agrabah

Override the default styles in the _config.scss:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
@mixin auroral-container() {
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
}

Changelog:

08/30/2018

• CSS update