CSS Gradients in HTML5 Code Example

Gradients in CSS3 are valuable addition supported by all modern browsers. No image needed!

CSS3 Gradient Code

.gradientBox {
background: linear-gradient(top,  #ffb260 0%,#ff7f13 100%); /* W3C */
}

But this code will not be supported in many older browsers.

All Browsers Compatible Code

Here’s fully compatible code, which can be used even in IE6:

.gradientBox {
background: #ffb260; /* Older browsers */
background: -moz-linear-gradient(top,  #ffb260 0%, #ff7f13 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb260), color-stop(100%,#ff7f13)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffb260 0%,#ff7f13 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffb260 0%,#ff7f13 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffb260 0%,#ff7f13 100%); /* IE10+ */
background: linear-gradient(top,  #ffb260 0%,#ff7f13 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb260', endColorstr='#ff7f13',GradientType=0 ); /* IE6-9 */
}

Note that gradients filter code will not show in IE7 and below. It will show in IE8 and later.

Here’s what it will produce:

Test Gradient

There are more things that can be done, like gradients positions and gradient types, will post about it later here. This tool is excellent to create more complex gradients.

This entry was posted in CSS CheatSheets and tagged , , , . Bookmark the permalink.

10 Responses to CSS Gradients in HTML5 Code Example

  1. html coder says:

    You have five “background” statements? Why? We don’t want to see a bunch of unnecessary BS code … show ONLY the code needed to generate the gradient in a modern browser that supports HTML5/CSS3.

  2. Patrick Mann says:

    It’s all very well saying it must be compatible but you’re missing the point – if it’s not all going to go to hell in a hand-basket, THE BROWSER NEEDS TO BE COMPATIBLE WITH THE SYNTAX – not the other way round.
    Take the stream of gibberish just to make IE do the same thing the other browsers do with simpler syntax. What is the point of that? They’re the largest corporation on the planet and after all these years they STILL can’t make a standards-compliant browser. Uninstall IE and get a REAL browser.

    P.

  3. Sheldon Livingston says:

    Great post! I agree in that you have to create for compatibility…

  4. Carr says:

    Nicely done! Compatibility is key. And yes, websites are developed for the client and not ourselves. Ignore those would-be whiners, they’re just a bunch of know-it-all bloggers anyways.

  5. Ron Swartz says:

    Good job. Disregard all the mean comments above. I don’t understand why people are getting so disgustingly mean when someone is trying to help.

  6. p1r4t0s says:

    I agree. this post is the first solution in google search.

  7. thanks dude for timely help.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">