Animated Gradient Background In Pure CSS – Auroral.css

Category: Animation , CSS & CSS3 | August 30, 2018
Author: LunarLogic
Views Total: 5,035
Official Page: Go to website
Last Update: August 30, 2018
License: MIT

Preview:

Animated Gradient Background In Pure CSS – Auroral.css

Description:

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

You Might Be Interested In:


Leave a Reply