Linear CSS Gradients that ANY Browser Can See

Share!

In the past, if you wanted to have an HTML entity to have a gradient background you created in image of a gradient and displayed it in the entity using the background-image attribute in CSS. With the evolution of browsers and CSS/HTML, this is no longer the case. In this tutorial we will learn how to use CSS to add a linear gradient to the background of entities.

The Setup

First, we need to decide how we are going to use the gradient. I suggest using the gradient as an enhancement. Keep in mind that some browsers will not display the gradient well or at all. So you will want it to degrade gracefully. If the browser doesn’t display the gradient the design should still be excellent and not require the gradient in order to function.

Gradients can be applied to block elements such as DIV tags. We will be using a simple DIV tag in this example.

A simple class will be set up to build the DIV we will display the gradient in. The DIV will be 300px wide by 200px tall. Here is the CSS to build the DIV.
.sample-box {
border:1px solid #999;
width:300px;
height:200px;
padding:5px;
color:#ccc;}

Rendering a box as follows:

Cool Gradient Goes here

Applying the Gradient

The Excellent – webkit

Now, let’s add our gradient. We will start by looking at the webkit method. Using browser specific CSS isn’t the best solution since it only covers a single rendering engine. However, as you will see, the major rendering engines offer the ability to render CSS gradients in their own way.

Webkit, namely Safari and Chrome, use the following CSS to render a linear gradient.
-webkit-gradient(type,start point, endpoint, from(start color), to(end color)
Type is either radial or linear. For this example we will be using linear. Point is a paired, comma separated value that gives a start point and finish point to the linear gradient. For our first example we will be creating a simple dark blue to light blue linear gradient that starts at the top and moves to the bottom. Here is the CSS we will use:
.gradient {-webkit-gradient(linear, left top, left bottom, from(#354bb8), to(#1a3366));}
For the HTML to display the DIV use the following code:
<div class="sample-box gradient">Cool Gradient applied</div>
Now, viewing this in your webkit browser will render a box that looks like the following screen shot.

CSS gradient in Safari
This uses the webkit CSS for creating a gradient.

Excellent! Now we have a fully functioning gradient. However, this is only visible in webkit. We now need to create CSS to display this gradient in other rendering engines.

The good

Firefox uses the Gecko rendering engine. The CSS is simple and follows this general format:
-moz-linear-gradient(start location, start color, end color)
The start location in this case is top, right, bottom or left. The start and end colors are typically the hexadecimal values of your colors. The CSS needed for displaying gradients is as follows:
background: -moz-linear-gradient(top, #354bb8, #1a3366);
The code renders the following screen shot in FireFox 3.6.
Firefox gradient CSS rendering
This gives us great results as well.

The Tolerable

Internet Explorer is the bane of web standards as most of us know. But, believe it or not IE 7 & 8 CAN render a gradient without an image. Now this isn’t true CSS. This takes a filter call within the CSS. Here is the code:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#354bb8', endColorstr='#1a3366');
That is all you need! Here is what Internet Explorer 8 renders with that code.
CSS gradient in IE 8
Now you know how to add a gradient to an entity. There are other advanced features such as radial gradients and stop points that can be added to enhance gradients. These are more difficult to get to be visible across all browsers. For a great online gradient CSS maker that will give you the code needed for Mozilla and Webkit head on over to the Western Civ CSS maker app.





20 thoughts on “Linear CSS Gradients that ANY Browser Can See”

  1. I shudder every time I see the proprietary “filter style” for IE compatibility.

    I suppose though even the other browsers are using proprietary styles.

    I’m still torn between more modern css techniques and low file size opaque .png gradients.

  2. I think the gradient helps a site look more appealing — as long as it is graceful, like you said.

  3. Do you allow me to convey this explanation to my site with the conservation of your rights?

    Thank you very much :)

  4. I thought I read somewhere that using filters wasn’t a good idea. There is of course no counting for developing for internet explorer 6 either.

    I think that people are going to start using CSS3 Gradients with webkit and moz more and more as it gets more popular. I’d say the same thing for using HTML5 but for IE, I personally will stick to using images and sprites where possible in IE.

    At least until IE 8.

    But then again, maybe I’m completely wrong and using filters is an alright practice. I think its definitley worth looking into though.

  5. Not “EVERY” browser can have gradients… Opera doesn’t understand them… So maybe you need to change the article to “MOST” browsers, some people still use Opera 😉

  6. @Elving. This is true. I neglected to mention Opera. The only solution there would be to use SVG I guess. Thanks for pointing that out.

  7. I wish everyone would just get on board with 1 standard. It would be so nice to be able to code one line and be done. I really love the new gradient styling though. It is going to make us a lot less reliant on graphic designers in order to make compelling sites.

  8. So, what’ the power of CSS when you have to declare three different classes for different browsers? Why not just produce a 1px wide background image that is the height you need and repeat-x? That seems to be much easier than doing the above – at least to me.

    If you want to ensure there’s no exposure beyond the image, just make the background-color the bottom gradient color – that way if the content area is longer than the image, it still looks nice.

    What is the advantage of the described method compared to my method?

  9. I’ve had a lot of luck using PIE script. If you overuse the script on a site it does not so nice things to page load though. On the plus side it works with every browser out there including IE6.

  10. Opera browser was missed,
    i use this for all browsers, tested on :
    IE 8.0 , FireFox 12.0 , Chrome 18.0 , Opera 12.0

    background-color:#55aacc;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5ac), color-stop(100%,#fff));
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#55aacc’,endColorstr=’#ffffff’,GradientType=0);
    background:-ms-linear-gradient(#5ac,#fff);
    background:-moz-linear-gradient(#5ac,#fff);
    background:-o-linear-gradient(#5ac,#fff);

  11. This is cool stuff, combined with RGBA colors it will blow up your mind. No silly 1x1px .pngs anymore! All hail CSS3!

  12. You forgot the W3C standard one, which I believe the latest versions of FF support. Same syntax as FF but without the -moz- prefix. That gives you future support also.

Leave a Reply

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