jQuery Plugin To Create Gradient Html Elements - rainbow.js

rainbow.js is a lightweight jQuery plugin which allows you to apply CSS3 radial gradient effects to any Html elements such as headers, text, images and DIVs.

See Also:

• Online CSS Gradient Generator

Basic Usage:

1. Download jQuery rainbow.js script and link it to your documents, after the jQuery inclusion.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="src/rainbow.min.js"></script>

2. Create an DIV element with data-OPTIONS attributes to generate a customizable gradient layer.

<div 
class="rainbow" 
data-type="radial" 
data-degrees="45" 
data-color="ea6153-c0392b" 
data-opacity="1" 
></div>

3. All the options.

• data-type="radial": radila or linear
• data-degrees="45": The  data-degreesattribute will only work with the linear attribute, it will indicate to rainbow.js by how many degrees you want to rotate your gradient.
• data-color="ea6153-c0392b": With the  data-colorattribute, you will specify which colors you want to use for your gradients.
• data-opacity="1": The  data-opacityattribute, will determine the opacity ammount of your gradient, it goes from 0to 1and accept values like .50.

---

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