Animating CSS Gradients With jQuery - gradientFade

gradientFade is a jQuery plugin (script) to create a gradient transition effect by fading through a group of DIV containers with CSS gradients.

Based on the CSS transition and opacity properties.

See Also:

• Online CSS Gradient Generator

How to use it:

1. Add gradient backgrounds to the DIV elements as follows:

<div class="example">
  <div style="background: linear-gradient(to right, #ee9ca7, #ffdde1)" class="gradient active"></div>
  <div style="background: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d)" class="gradient"></div>
  <div style="background: linear-gradient(to right, #ee9ca7, #8a8a8a)" class="gradient"></div>
  <div style="background: linear-gradient(to right, #34f351, #ffdde1)" class="gradient"></div>
  <div style="background: linear-gradient(to right, #007991, #78ffd6);" class="gradient"></div>
  ...
</div>

2. Make the gradient elements fullscreen.

.gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  z-index: 100;
  opacity: 0;
  transition: opacity 1s;
}

3. Set the opacity of the first element.

.gradient:first-of-type {
  opacity: 1;
}

4. Import the latest version of jQuery JavaScript library into the html file.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>

5. Download and load the JavaScript file gradientFade.js after jQuery.

<script src="gradientFade.js"></script>

6. Initialize the plugin and set the transiton delay in milliseconds. Done.

gradientFade(2000);

---

This awesome jQuery plugin is developed by HarryVerhoef. For more Advanced Usages, please check the demo page or visit the official website.