CSS Gradients

With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome, we can safely implement them in our websites.  Let's look at the basics of CSS gradients:  their syntax, browser support, and fallbacks.

Gradient Terms and Ideas

Gradients provide a method to, over a customizable amount of space, transition from one color to another.  Gradients come in two variants:  linear (one consistent gradient) and radial (circular).  While gradients are obviously graphical elements, they're simplistic in creation which makes them outstanding candidates for simple, programmatic creation via CSS.  CSS3 introduced CSS gradients but their implementation took longer than we all wanted.

CSS Linear Gradient Syntax

The linear gradient implementations are different in each browser but there is a set standard:

background-image: linear-gradient( || ,]? ,  [, ]* )

The first argument is the point of which to start the gradient or the angle at which the gradient should be drawn.  The subsequent arguments are "color stops" along the gradient.  Two color stops are required (start and end), but any number of color stops can be added for increased customization of the gradient.  Color stops can include just a color or a color and percentage or point:

/* old:  color-stop(percentage/amount, color) */
color-stop(0.20, red)

/* current:  color _ percentage/amount */
#dea222 20%

As is the case with most newer, advanced CSS capabilities, each browser tends to provide its own implementation.  WebKit, for example, even has multiple syntaxes.  The following code snippet should cover all the bases for a basic, top-to-bottom linear gradient:

#example1	{
	/* fallback */
	background-color: #063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);
	/* firefox; multiple color stops */
	background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);
	/* ie 6+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
	/* ie8 + */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
	/* ie10 */
	background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);
	/* opera 11.1 */
	background-image: -o-linear-gradient(#063053, #395873, #5c7c99);
	/* The "standard" */
	background-image: linear-gradient(#063053, #395873, #5c7c99);
}

Note that a basic background-color is provided first.  This background-color is a fallback for browsers that have not yet implemented CSS gradients.  The CSS gradient spec allows for degree'd CSS gradients instead of basic top-to-bottom gradients.  These can be accomplished with the following syntax:

#example2	{
	/* fallback */
	background-color:#063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* firefox; multiple color stops */
	background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* ie10 */
	background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);
	/* opera 11.1 */
	background-image: -o-linear-gradient(45deg, #063053, #395873);
	/* The "standard" */
	background-image: linear-gradient(45deg, #063053, #395873);
}

Or how about a more ... colorful CSS gradient?  Let's do a rainbow gradient:

/* example 3 - linear rainbow */
#example3	{
	/* fallback */
	background-color:#063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));
	/* chrome 10+, safari 5.1+ */
	background-image:-webkit-linear-gradient(red, green, blue, purple, orange);
	/* firefox; multiple color stops */
	background-image:-moz-linear-gradient(top, red, green, blue, purple, orange);
	/* ie10 */
	background-image: -ms-linear-gradient(red, green, blue, purple, orange);
	/* opera 11.1 */
	background-image: -o-linear-gradient(red, green, blue, purple, orange);
	/* The "standard" */
	background-image: linear-gradient(red, green, blue, purple, orange);
}

A quick note about Internet Explorer's gradient support.  Internet Explorer's filter and -ms-filter syntax takes precedence over the newer -ms-linear gradient syntax.  It's best to use IE conditional comments to create reliable gradients:

<!--[if lt IE 10]>
<style>
.gradientElement {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
}
</style>
<![endif]-->

Not ideal but reliability is important when designing a website.

CSS Radial Gradients

Radial gradients are unlike linear gradients because they don't move from one simple direction to another;  they start with a center-point and move outward at 360 degrees.  Radial gradients are not supported by Internet Explorer at this time, and the browsers that do support radial gradients have had significantly different syntaxes...I'm looking at you, WebKit! WebKit has, however, overhauled their radial gradient syntax.  Here's a brief look at the current-but-soon-to-be-legacy radial gradient code:

/* basic */
background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red));
/* color stops */
background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));

WebKit recently announced its new syntax for creating radial gradients which happens to fall in line with Firefox's implementation:

radial-gradient( [ || ,]? [ || ,]? , [, ]*)

This radial gradient syntax works in Firefox 4 and the WebKit nightlies.  There are a number of size constants available with radial gradients:

• closest-side: The gradient's shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).
• closest-corner: The gradient's shape is sized so it exactly meets the closest corner of the box from its center.
• farthest-side: Similar to closest-side, except the shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).
• farthest-corner: The gradient's shape is sized so it exactly meets the farthest corner of the box from its center.
• contain:  A synonym for closest-side.
• cover:  A synonym for farthest-corner.

A basic usage of a radial gradient would look like:

#example4 {
	background-image: -moz-radial-gradient(orange, red);
	background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red)); /* old */
	background-image: -webkit-radial-gradient(orange, red); /* new syntax */
	background-image: radial-gradient(orange, red);
}

Note that no positioning or size has been given -- simply two color stops to it over the course of the gradient.  Any number of color stops can be used so a simple rainbow gradient would look like:

#example5 {
	background-image: -moz-radial-gradient(red,green,blue,purple,orange);
	background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange)); /* old */
	background-image: -webkit-radial-gradient(red, green, blue, purple, orange); /* new syntax */
	background-image: radial-gradient(red, green, blue, purple, orange);
}

A more customized radial gradient with positioning and detailed color stops would look like:

#example6 {
	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
	background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
	background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
}

Note that my examples are using hex colors and px units.  You may use any of the color constructs or measuring units with your gradients.

CSS Gradients:  Tips and Tricks

CSS gradients are quite valuable but can be difficult to implement.  Even when you've got the gradient you want, browser support can be different.  Here are a few tips for using CSS gradients:

• Want opacity within your gradients?  Use rgba colors.
• Always use a fallback background so that clients that doesn't support gradients aren't hung out to dry.
• Both Firefox and WebKit-based browsers provide prefixed repeating-linear-gradient and repeating-radial-gradient capabilities.  An example of usage:

  #example7 {
  	background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10px);
  	background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);
  }
  

• If gradient are critical (i.e. charting, animation, etc.), I highly recommend using Dojo's GFX library, which is a masterpiece of vector graphic creation.  GFX also allows for radial gradients in Internet Explorer!

CSS Gradient Fallbacks

Older browsers like Internet Explorer 6 and 7, along with Opera and older versions of Firefox, don't support CSS gradients so the best fallback for such cases is defining a regular background property with a color of your choice:

/* example 1 - basic */
#example1	{
	/* fallback */
	background-color:#063053;
	/* gradients below */
}

Another option would be to create the gradient a browser that supports CSS gradients, take a screenshot, cut an image of the gradient, and use conditional CSS for the browsers that didn't support CSS gradients.

CSS gradients are yet another step in the evolution of CSS, mixing basic style programming with basic design principles.  Now that CSS gradients are supported in most A-grade browsers, we can start to use them with more confidence.