AaHa Creative

Currently, it is possible to create CSS gradients in IE 6, IE7, IE8, Webkit-browsers (Chrome 2.0+ and Safari), and Firefox 3.6+. As of this post, Opera doesn’t support CSS-only gradient backgrounds. There are other methods to create gradient backgrounds with JavaScript or via the canvas element; however, I prefer the CSS only methods.

Each of the major browsers have their own syntax to implement CSS gradients because it has not been implemented as standard yet.

Webkit (Chrome and Safari) background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#FFF));

Firefox 3.6 and above background: -moz-linear-gradient(top, #efefef, #FFF);

Internet Explorer 6 and IE 7 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#EFEFEF',EndColorStr='#FFF');

Internet Explorer 8 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFEFEF, endColorstr=#FFF)";

Whether you have noticed it or not, this website has a CSS gradient that goes from #EFEFEF at the top of the page to #FFFFFF. (This gradient is exceedingly subtle and most people won’t notice it consciously, but it helps with visibility and eye fatigue on long posts.) The entire code used is:

.gradient{
	/* For any browser that can't create a gradient  */
	background-color: #EFEFEF;
	/*//mozilla*/
	background: -moz-linear-gradient(top, #efefef, #FFF);
	/* Chrome/Safari 	 */
	background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#FFF));
	/*IE ^/7 */	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#EFEFEF',EndColorStr='#FFF');
	/*IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFEFEF, endColorstr=#FFF)";
}

Since each prefixed option is only parsed and understood by only one browser, they can be used in a stack without any incompatibilities or errors. This CSS only covers linear gradients; however, radial and diagonal gradients are possible. Use fancier gradients with care and as much as you may want to, never go from Green to Purple no matter how much you may be tempted.

Beware the Microsoft Filters

As a final note, in all versions of IE, the background gradient can interfere with the way text is displayed. The images below shows what happens in IE if you try to lay text over a background gradient.

This is how the text is supposed to appear.

As soon as the gradient is added, the text becomes blurred. There is no consistancy and it makes the text hard-to-read.

With the gradient and a smaller font, the text looks like it was printed without enough ink.

For this reason, I’ve left AahaCreative without a background gradient in Internet Explorer. It’s a shame, but, hopefully, the IE team will get their acts together for IE 9.

P.S. The image that goes with this post is a screenshot of a CSS-only gradient.

Leave a Reply Cancel reply