jQuery Plugin For CSS Gradient Transitions - Gradientify

Gradientify is a jQuery plugin that uses CSS3 Linear Gradients to create a radial gradient background with transition.

See also:

• Create An Animated Radial Gradient Background With jQuery and CSS3
• Creating Animated Background with Random Gradient Transitions using jQuery
• jQuery Plugin For Multi-layered Gradient Background with CSS3 - Shards
• Gradient Color Background Plugin For jQuery - Add Shine

How to use it:

1. Load the latest version of jQuery JavaScript library and the jQuery gradientify plugin in the document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.gradientify.js"></script>

2. Call the function on the target element and specify the RGB colors for the CSS3 gradients.

$("body").gradientify({
  gradients: [
    { start: [237,85,101], stop: [218,68,83] },
    { start: [70,207,176], stop: [52,188,157] },
    { start: [52,152,219], stop: [41,128,185] }
  ]
});

3. More config options.

$("body").gradientify({

  // Gradient angle
  angle: '0deg', 

  // Frames per second
  fps: 60, 

  // Transition time
  transition_time: 8

  // Gradients
    gradients: [
      { start: [237,85,101], stop: [218,68,83] },
      { start: [70,207,176], stop: [52,188,157] },
      { start: [52,152,219], stop: [41,128,185] }
    ]
    
});

---

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