The following LessCSS mixin creates a linear gradient from light to dark, using LessCSS to automatically define the top and bottom of the gradient. This allows for very consistent gradients, given a choice of color palette.

.background_gradient(@base) {
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: @base;
    background: -webkit-gradient(linear, left top, left bottom, from(lighten(@base, 5%)), to(darken(@base, 5%)));
    background: -moz-linear-gradient(top,  lighten(@base, 5%), darken(@base, 5%));
}   

// Example usage: 
@blue_base: #7db8db;
.blue { .background_gradient(@blue_base); }
.blue:hover { .background_gradient(darken(@blue_base, 10%)); }
.blue:active { .background_gradient(lighten(@oblue_base, 10%)); }

You could gave others for "red" and "green" and whatever, and when you added classes of that name to any block-level DOM object, it would have a lovely trio of gradients that would switch depending upon the hover and active (if a link) state of the object.