ClassyGradient
Gradients? Yummy!

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

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.

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.

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

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();

• 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

check out this hefty (and girly) gradient

    Horizontal
    Vertical



$(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);
}

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