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).

  • Just Random Color (0)
    Some time ago I was working on app where for each category we had to assign random color in case that user didn't choose one. A few day ago I needed to generate random color again. Instead […]
  • Twitter Flock for Wordpress: multiple accounts tweets with style (67)
    Twitter Flock is Wordpress plugin for showing multiple accounts tweets with different color scheme for every account. Also, there are setting allowing you to control how your tweets will […]
  • mooBarGraph: AJAX graph for MooTools (17)
    mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph. This plugin made graph from your JSON data and is compatible with all […]
  • Google Buzz ER: Google Buzz for Wordpress (133)
    Yesterday Google announced new service, Google Buzz, a new way to share updates, photos, videos and more, and start conversations about the things you find interesting. Today you can have […]
  • Animated Progress Bar in 4 lines of jQuery (42)
    Progress bars are really useful to indicate to user that something happens and when it will be approximately done. They are useful on page where assets should be preloaded before page is […]

21 comments on "Gradienter: Add gradient to elements"

did you try to open demo page ?

Lazarevic Ivan on December 25, 2012 at 8:29 pm

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

Winkyboy on December 20, 2012 at 12:56 pm

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

bender on September 21, 2012 at 12:39 pm

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

Adrian Voicu on August 3, 2012 at 7:49 am

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

Carolyn Lin on March 31, 2012 at 1:17 am

Thanks! it’s working fine.

Swot template on November 1, 2011 at 7:05 pm

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.

Mike Brown on May 10, 2011 at 6:26 pm

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

Jocuri Mario on March 3, 2011 at 11:33 am

Thanks very nice and it’s working fine.

webaryans on January 24, 2011 at 1:51 am

It worked like a sharm! Thank you very much!

Philip on January 7, 2011 at 10:24 am

It doesn’t work at all.

Harry on January 5, 2011 at 3:00 am

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>