ClassyGradient
Gradients? Yummy!

Introduction

ClassyGradient is a jQuery plugin that allows you to add gradient generators in your web apps and sites. Smart and fully cutomizable, it is suitable for any type of use: CSS generators, HTML5 canvas applications, live usage.

Unlimited gradient points.
HTML5 Browsers compatible (IE9 +).
Generate CSS code.
Customizable by CSS.
Can easily be combined with HTML5 canvas.
No server files, only Javascript & CSS.

Download it

License

This jQuery plugin is distributed under the MIT license. Enjoy!

Demo

Setup

First you need to include the jQuery library, the jQuery UI library and the ColorPicker plugin, since ClassyGradient is a plugin that depends on those. You can download jQuery from the jQuery website or link it directly from the Google CDN.

<link rel="stylesheet" href="css/jquery.colorpicker.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="js/jquery.colorpicker.js"></script>

Secondly, you need to include the jQuery ClassyGradient javascript and CSS files into your page. You can do it by adding the code below to your page.

<link rel="stylesheet" href="css/jquery.classygradient.min.css" />
<script src="js/jquery.classygradient.min.js"></script>

Next, you create the element that you want to trigger the gradient on.

<div class="gradient"/><div>

As the last step, you trigger the ClassyGradient() function on the element you just created. For example, we trigger the function on the div with the class gradient.

$('.gradient').ClassyGradient();

Options

Parameters
gradient - default gradient points
width - gradient preview width, default is 300 pixels
height - gradient preview height, default is 18 pixels
point - gradient point size, default is 8 pixels
target - gradient destination, default is null
orientation - gradient orientation, can be horizontal or vertical, default is vertical
Callbacks
onChange - event fired on gradient changes
onInit - event fired on initialization
Methods
getArray() - return the gradient points as an array
getCss() - return the full gradient generated CSS code
getString() - return the gradient points as a string
setOrientation() - change gradient orientation
update() - trigger this method if you're updating parameters after plugin init

Example

check out this hefty (and girly) gradient

<div class="targetEl">check out this hefty (and girly) gradient</div>
<select id="orientation" onchange="changeOrientation();">
    <option value="horizontal">Horizontal</option>
    <option value="vertical" selected="selected">Vertical</option>
</select>
<div class="gradient2"></div>

$(document).ready(function() {
    $('.gradient2').ClassyGradient({
        gradient: '#ebf1f6 0%,#ff9cff 40%,#ff6aff 61%,#ff2db7 100%',
        target: '.targetEl'
    }); 
});
function changeOrientation() {
    var orientation = $('#orientation :selected').val();
    $('.gradient2').data('ClassyGradient').setOrientation(orientation);
}

<div class="gradient3"></div>
<textarea class="export"></textarea>

$(document).ready(function(){
    $('.gradient3').ClassyGradient({                                
        gradient: '#00ffff 0%,#008900 30%,#f00044 70%,#0042d2 100%',
        onChange: function(stringGradient,cssGradient) {
            $('.export').val(cssGradient);
        }
    }); 
});

ClassyGradientGradients? Yummy!