Gradient in CSS

Question

I added a gradient background for my .html page. Seems to work in most browsers but I would like to know if it is standard and complies to all rules.

.css

html {
  /* fallback  */
  background-color: #65a5d1;

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#65a5d1));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #fff, #65a5d1);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #fff, #65a5d1);

  /* IE 10 */
  background: -ms-linear-gradient(top, #fff, #65a5d1);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #fff, #65a5d1);

  height: 900px;

}

No, it's non-standard, and none of the prefixes comply to any rules at all. The current situation only allows you to choose between better browser compatibility or standards compliance, but not both. — BoltClock
– BoltClock, Commented Oct 20, 2012 at 16:04

Leniel Maccaferri · Accepted Answer · 2012-10-20 16:01:19Z

If you want to generate gradients that are fully compatible you can check the Ultimate CSS Gradient Generator:

Here's the output it generates:

/* Old browsers */
background: #1e5799;

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMWU1Nzk5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMjk4OWQ4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjMjA3Y2NhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);

/* FF3.6+ */
background: -moz-linear-gradient(45deg,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);

/* Chrome, Safari4+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));

/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(45deg,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);

/* Opera 11.10+ */
background: -o-linear-gradient(45deg,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);

/* IE10+ */
background: -ms-linear-gradient(45deg,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);

/* W3C */
background: linear-gradient(45deg,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);

/* IE6-8 fallback on horizontal gradient */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );

As you see it generates bit more properties to cover even more cases.

If you want support for IE 9 you'll have to follow this... yeah I know it sucks, but...

Support for full multi-stop gradients with IE9 (using SVG):

Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

ColorZilla needs to update its gradient generating code because the W3C gradient syntax has changed. This will render very differently in Firefox 16 than in Firefox 15 for example. And since you added the [standards-compliance] tag, I should point out that the only part of the code that's valid CSS are the first two lines (the unprefixed gradient technically validates but doesn't do what you expect).
Understandable since there seems to be no consensus amongst browser vendors and hence these awful CSS properties. They just want to add their thingy and sell their product as the best one in the market. :)

Collectives™ on Stack Overflow

Gradient in CSS

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related