Tip: CSS gradients

Gradients in CSS are actually a special image. Because multiple background images are possible, you can specify both an image and a gradient. Below is the entire CSS code for having gradients in all major browsers. For your convenience, I encapsulated it into a Less function.

.gradient(@fromColor, @toColor, @additionalImage) {
	background-color: @fromColor;
	background-image: @additionalImage;
	background-image: @additionalImage, -moz-linear-gradient(90deg, @fromColor, @toColor);
	background-image: @additionalImage, -webkit-gradient(linear, 0% 0%, 0% 100%, from(@fromColor), to(@toColor));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@fromColor', endColorstr='@toColor');
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@fromColor', endColorstr='@toColor');
}

Here I used top down gradient, but you can easily modify it. If the browser does not support CSS gradients, it will gracefully fallback to a plain color.