Gradient

Create a beautiful gradient without images.

Pick a type of a gradient you want to have and put colours in brackets. You can put either two or three colours. In the first case the default colour for old browsers will be the same as the first colour provided. In the second case you can set that colour as a third argument.

The default class - .gradient - is the same as .vertical-gradient.

You can choose from four types of gradients:

1. Vertical - colour will change from top to bottom.

2. Horizontal - change is from left to right.

3. Diagonal - from top-left to bottom-right.

4. Radial - from the centre of an element to its borders.

Gradients tend to be tricky. There's no support for this property in older IE, but "filter" comes to the rescue. It can generate only horizontal and vertical gradients, though. Also IE9 has some strange behaviour -> css3wizardry.com/2010/10/29/css-gradients-for-ie9/. To provide the best experience for your visitors you should use gradient generator (refer to resources above) with "IE9 Support" option checked.

Resources

-- gradient generator with broad browsers support and some advanced options: -> http://www.colorzilla.com/gradient-editor/

-- gradient is a powerful tool - you can generate shapes as a background! -> http://lea.verou.me/css3patterns/

Browsers support: almost full

Notable lack of support: Opera mini

Caution! IE6 - IE8 use filter property that can generate only vertical and horizontal gradients. For the best experience in IE9 use gradient generator mentioned above in the resources.

---

Code

.gradient (@color1, @color2){
	background: @color1;
	background: -moz-linear-gradient(top,  @color1 0%, @color2 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@color1), color-stop(100%,@color2));
	background: -webkit-linear-gradient(top,  @color1 0%,@color2 100%);
	background: -o-linear-gradient(top,  @color1 0%,@color2 100%);
	background: -ms-linear-gradient(top,  @color1 0%,@color2 100%);
	background: linear-gradient(top,  @color1 0%,@color2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color1', endColorstr='@color2',GradientType=0 );
}
.gradient (@color1, @color2, @color3){
	background: @color3;
	background: -moz-linear-gradient(top,  @color1 0%, @color2 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@color1), color-stop(100%,@color2));
	background: -webkit-linear-gradient(top,  @color1 0%,@color2 100%);
	background: -o-linear-gradient(top,  @color1 0%,@color2 100%);
	background: -ms-linear-gradient(top,  @color1 0%,@color2 100%);
	background: linear-gradient(top,  @color1 0%,@color2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color1', endColorstr='@color2',GradientType=0 );
}
// .vertical-gradient = .gradient
.vertical-gradient (@color1,@color2) {.gradient(@color1,@color2)}
.vertical-gradient (@color1,@color2,@color3) {.gradient(@color1,@color2,@color3)}
.horizontal-gradient (@color1, @color2) {
	background: @color1;
	background: -moz-linear-gradient(left,  @color1 0%, @color2 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,@color1), color-stop(100%,@color2));
	background: -webkit-linear-gradient(left,  @color1 0%,@color2 100%);
	background: -o-linear-gradient(left,  @color1 0%,@color2 100%);
	background: -ms-linear-gradient(left,  @color1 0%,@color2 100%);
	background: linear-gradient(left,  @color1 0%,@color2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color1', endColorstr='@color2',GradientType=1 );
}
.horizontal-gradient (@color1, @color2,@color3) {
	background: @color3;
	background: -moz-linear-gradient(left,  @color1 0%, @color2 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,@color1), color-stop(100%,@color2));
	background: -webkit-linear-gradient(left,  @color1 0%,@color2 100%);
	background: -o-linear-gradient(left,  @color1 0%,@color2 100%);
	background: -ms-linear-gradient(left,  @color1 0%,@color2 100%);
	background: linear-gradient(left,  @color1 0%,@color2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color1', endColorstr='@color2',GradientType=1 );
}
.diagonal-gradient (@color1, @color2) {
	background: @color1;
	background: -moz-linear-gradient(-45deg,  @color1 0%, @color2 100%);
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,@color1), color-stop(100%,@color2));
	background: -webkit-linear-gradient(-45deg,  @color1 0%,@color2 100%);
	background: -o-linear-gradient(-45deg,  @color1 0%,@color2 100%);
	background: -ms-linear-gradient(-45deg,  @color1 0%,@color2 100%);
	background: linear-gradient(-45deg,  @color1 0%,@color2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color1', endColorstr='@color2',GradientType=1 );
	}
.diagonal-gradient (@color1, @color2,@color3) {
	background: @color3;
	background: -moz-linear-gradient(-45deg,  @color1 0%, @color2 100%);
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,@color1), color-stop(100%,@color2));
	background: -webkit-linear-gradient(-45deg,  @color1 0%,@color2 100%);
	background: -o-linear-gradient(-45deg,  @color1 0%,@color2 100%);
	background: -ms-linear-gradient(-45deg,  @color1 0%,@color2 100%);
	background: linear-gradient(-45deg,  @color1 0%,@color2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color1', endColorstr='@color2',GradientType=1 );
	}
.radial-gradient (@color1, @color2) {
	background: @color1;
	background: -moz-radial-gradient(center, ellipse cover,  @color1 0%, @color2 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,@color1), color-stop(100%,@color2));
	background: -webkit-radial-gradient(center, ellipse cover,  @color1 0%,@color2 100%);
	background: -o-radial-gradient(center, ellipse cover,  @color1 0%,@color2 100%);
	background: -ms-radial-gradient(center, ellipse cover,  @color1 0%,@color2 100%);
	background: radial-gradient(center, ellipse cover,  @color1 0%,@color2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color1', endColorstr='@color2',GradientType=1 );
	}
.radial-gradient (@color1, @color2,@color3) {
	background: @color3;
	background: -moz-radial-gradient(center, ellipse cover,  @color1 0%, @color2 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,@color1), color-stop(100%,@color2));
	background: -webkit-radial-gradient(center, ellipse cover,  @color1 0%,@color2 100%);
	background: -o-radial-gradient(center, ellipse cover,  @color1 0%,@color2 100%);
	background: -ms-radial-gradient(center, ellipse cover,  @color1 0%,@color2 100%);
	background: radial-gradient(center, ellipse cover,  @color1 0%,@color2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color1', endColorstr='@color2',GradientType=1 );
	}