Color gradient backgrounds have become a popular design element in recent years. The most common way to achieve the effect is to add a thin, tall background image and repeat that image horizontally.
But thanks to updates some browser updates, a designer can now get a similar effect—for most browsers—with nothing more than a cascading style sheet.
WebKit Leads the Way
The WebKit Open Source Project, which powers Apple's Safari browser and Google's Chrome browser, among others, started supporting CSS background gradients about five years ago. So in this demonstration of the technique, I'll start with the WebKit syntax.
I will, of course, need a basic HTML page. Since I am going to focus on how to add a background, I don't need any content. For your convenience, I have included the markup that I used in the demonstration below.
<!doctype html> <html lang="en"> <head> <title>CSS Background Gradient Demonstration</title> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="style.css"> <link rel="icon" type="image/png" href="favicon.png"> </head> <body> <div id="wrapper"> </div> </body> </html>
In the WebKit syntax, I first specify the style description using a special WebKit prefix.
-webkit-gradient
Next, I tell the browser if I would like a linear gradient or a radial gradient. In this example, I have specified the former.
background: -webkit-gradient(linear,
I must tell the browser where I would like the gradient to begin and end. I can use coordinates, percentages, or keywords. For example, these are percentages:
background: -webkit-gradient(linear, 0% 0%, 0% 100%,
Here are some keywords:
background: -webkit-gradient(linear, left top, left bottom,
Both of the preceding would produce identical results.
Next, I describe the colors that the browser should use—in this case a nice blue and white.
from(#1159b6), to(#fff))
Finally, I tell the browser not to repeat the background, and set a minimum height for the page. In the end, my complete style description looks like this:
body {margin: 0; padding: 0; min-height: 500px; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1159b6), to(#fff)) no-repeat;}
The result, shown in Chrome, is a beautiful gradient background, without using an image.
Using Color Stops
I can also use this technique to create a more complicated background gradient, complete with color stops.
Imagine, for example, that I wanted a gradient that started out white, faded to blue, and then faded back to white. The style description would look like this:
body {margin: 0; padding: 0; min-height: 800px; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), color-stop(0.5, #1159b6), to(#fff)) no-repeat;}
The result is shown below.
I can also include more than two colors. In this next example, the gradient goes from black, to blue, to white.
body {margin: 0; padding: 0; min-height: 600px; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), color-stop(0.5, #1159b6), to(#fff)) no-repeat;}
Add Firefox
I am going to turn my attention to the first example above (blue to white), and try to recreate it in Firefox. As a reminder, here is the style description that works in Safari and Chrome.
body {margin: 0; padding: 0; min-height: 500px; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1159b6), to(#fff)) no-repeat;}
In Firefox, the syntax is similar, but not identical. I again start with a custom prefix. But in Firefox, that prefix includes the type (linear or radial) of gradient I desire.
-moz-linear-gradient
For Firefox, I next specify the starting point using a keyword.
background: -moz-linear-gradient(top,
I then describe the two colors of the gradient.
background: -moz-linear-gradient(top, #1159b6, #fff)
As with WebKit, I also specify that I do not want this background to repeat. The final Firefox description follows:
background: -moz-linear-gradient(top, #1159b6, #fff) no-repeat;
In ways similar to WebKit, Firefox can render multiple color stops or change the angle of the gradient. For example, I can specify an angle in degrees.
background: -moz-linear-gradient(left -80deg, #1159b6, #fff) no-repeat;
It is important to note that Firefox keywords do not necessarily work the same way as WebKit keywords. For example, specifying "left top" in WebKit created the gradient shown in the section above—the basic blue to white linear gradient. That gradient is the equivalent of specifying "top" in Firefox. The description "left top" in Firefox would produce something similar to specify degrees, like the example image immediately above this paragraph.
Include IE
Next, I want to generate a very similar CSS gradient in Microsoft Internet Explorer (IE). For this browser, I will not use "background," but rather "filter" to specify the background gradient. Take a look at the style description.
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1159b6, endColorstr=#ffffff);
The result, will be very similar to what I was able to produce in Chrome and Firefox.
Putting the Three Together
Now, I combine all three techniques into a single style description, so that no matter which of these browsers the user chooses, my gradient will work.
body {margin: 0; padding: 0; min-height: 500px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1159b6, endColorstr=#ffffff);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1159b6), to(#fff)) no-repeat;
background: -moz-linear-gradient(top, #1159b6, #fff) no-repeat; }
Resources
- W3C CSS Transitions Module
- Surfin' Safari, "Introducing CSS Gradients"
- "CSS Gradients in Firefox 3.6?"
- Microsoft's "Gradient Filter"
