CSS gradients for all web browsers, without using images

One thing that is quite nice is that we now have the ability to create gradients in our pages just from CSS code, and without the use of any images.

Syntax options and web browser support

The good news is that there is web browser support for CSS gradients in Firefox, Safari, Google Chrome and Internet Explorer (Opera will most likely add it soon too). The bad news is that, for a couple of reasons, the implementation in each web browser is different from the other. In IE’s case, it’s because it’s based on their ancient approach that stems form IE 5.5. For WebKit-based web browsers (like Safari and Google Chrome), they were the first ones to suggest it, based on the approach for canvas, but this was later changed by the CSS WG, and the new syntax is now the one implemented in Firefox (and I guess this syntax will later make into WebKit-based web browsers as well).

There are two great articles on this topic, delver deeper into the syntax differences: CSS gradient syntax: comparison of Mozilla and WebKit and CSS gradient syntax: comparison of Mozilla and WebKit (Part 2).

So, as of now, we have have CSS gradients support for:

  • Firefox 3.6
  • Safari 4
  • Google Chrome
  • Intenet Explorer 5.5

Examples

Let’s look at some samples code:

Linear gradient, from top

This will show a simple linear gradient, going from top to bottom in a element.

<style>
	#gradient {
		color: #fff;
		height: 100px;
		padding: 10px;
		/* For WebKit (Safari, Google Chrome etc) */
		background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
		/* For Mozilla/Gecko (Firefox etc) */
		background: -moz-linear-gradient(top, #00f, #fff);
		/* For Internet Explorer 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
		/* For Internet Explorer 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
	}  
</style>


<div id="gradient">
	I haz gradient
</div>

Rendered version

I haz gradient

Linear gradient, from left

This gradient is rendered from left to right, for 70% of the width of the element. The color stop after 70% will not work in Internet Explorer; “interestingly” enough its FinishX and GradientSize properties doesn’t apply to the Gradient filter

<style>
	#gradient-with-stop {
		color: #fff;
		height: 100px;
		padding: 10px;
		/* For WebKit (Safari, Google Chrome etc) */
		background: -webkit-gradient(linear, left top, right top, from(#00f), to(#fff), color-stop(0.7, #fff));
		/* For Mozilla/Gecko (Firefox etc) */
		background: -moz-linear-gradient(left top, #00f, #fff 70%);
		/* For Internet Explorer 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF, GradientType=1);
		/* For Internet Explorer 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF, GradientType=1)";
	}  
</style>


<div id="gradient-with-stop">
	I haz gradient
</div>

Rendered version

I haz gradient 2

Radial gradient

Time to get a little bit funky with radial gradients! From what I have seen, there is no support for radial gradients in Internet Explorer.

<style>
	#gradient-radial {
		color: #fff;
		width: 100px;
		height: 100px;
		padding: 10px;
		/* For WebKit (Safari, Google Chrome etc) */
		background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(#ffffa2), to(#00f));
		/* For Mozilla/Gecko (Firefox etc) */
		background: -moz-radial-gradient(40% 40%, farthest-side, #ffffa2, #00f);
		/* For Internet Explorer */
		/* As if... */
	}  
</style>


<div id="gradient-radial">
	I haz gradient
</div>

Rendered version

I haz radial gradient

Thoughts

For simple linear gradients, this offers quite a nice and simple way to offer and control it directly through CSS. Unfortunately, lack of support in Internet Explorer doesn’t make it as useful as it could be.

More reading

138 Comments

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.