Gradienter: Add gradient to elements

Last night I started to work on WordPress theme for blog and I got an idea that every post should have their own background color and that maybe those colors can be in gradient. Since that that’s very boring to do manually, I’ve decide to write jQuery plugin which will do that job.


Gradienter is easy to use, and with small effort you can have really interesting color effect on your page.

Since that this is jQuery plugin, we should include jQuery and Gradienter JavaScript files in our page:

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="gradienter.js"></script>

After this, at the bottom of the page we have to apply Gradienter on desired elements and optionally set parameters.


Gradienter have only three parameters:

color_start: 'FFFFFF' // first color in gradient
color_end: '000000' // last color in gradient
prop: 'background-color' // on which CSS property should apply gradient

So, if we want that all elements with ‘box’ class have gradient started from #56B2CB and finished with #164E5D, all we have to do is next:

$('.box').gradienter({ color_start: '56B2CB', color_end: '164E5D' });

Note that colors are in HEX format, without #.

Changing the ‘prop’ parameter gradient can be applied to all CSS properties that have color (background-color, color, border-color).

Comments [ 21 Comments ]

  1. Harry
    January 5, 2011

    It doesn’t work at all.

  2. Philip
    January 7, 2011

    It worked like a sharm! Thank you very much!

  3. webaryans
    January 24, 2011

    Thanks very nice and it’s working fine.

  4. Jocuri Mario
    March 3, 2011

    Simple but very effective writing. Thanks for sharing such a nice post

  5. Mike Brown
    May 10, 2011

    Doesn’t work for me, using Firefox 4.01 and jQuery 1.4.4.

    The function appears to think that each element to which the colouring is to be applied is an array of some kind with a valid .length property. i.e.

    steps = $(el).length;

    But that line always evaluates to 1 for me. Consequently, none of the code inside .each loop below ever executes:

    $.each($(el), function(i,item){

    FYI, the code sets up lots of global variables, unintentionally. E.g. this line:

    var r = g = b = 0;

    only sets up r as a local variable. g and b are set to be globals. Other variables in the function have no “var” in their declaration, and so are global.

  6. Swot template
    November 1, 2011

    Thanks! it’s working fine.

  7. Carolyn Lin
    March 31, 2012

    Thank you so very much for taking the time to share…very useful, indeed!

  8. Adrian Voicu
    August 3, 2012

    Works great. Will use it on a site if you don’t mind :)

  9. bender
    September 21, 2012

    does not work at all¡¡¡¡¡¡ don not use it

  10. Winkyboy
    December 20, 2012

    Doesn’t seem to work; testing in Chrome (23.0.1271.97 m)

  11. Lazarevic Ivan
    December 25, 2012

    did you try to open demo page ?

» Trackbacks and pingbacks click to expand

  1. […] here, you might want to subscribe to the RSS feed for updates on this topic.Powered by WP Greet BoxGradienter is a new and innovative jQuery gradient color plugin to dynamically add gradients to […]

  2. […] Gradienter is easy to use, and with small effort you can have really interesting color effect on your page. Ivan Lazarevic made this for one of  his theme project and decided to release it for public. […]

  3. […] 12).Gradienter- Add gradient to elements […]

  4. […] Gradienter: Add gradient to elements Bu yazı Genel kategorisine 27 Mayıs 2013 tarihinde ibrahim kapusuz tarafından gönderildi. […]

Leave a Reply

More Articles

more on