How to apply -webkit-gradient to IE?

Question

I have the following css code:

-webkit-gradient(linear, left bottom, left top, from(#5AE), to(#036));

Which displays the background very nicely in Chrome. Internet explorer just displays a white background. I tried applying CSS 3 pie, which didnt change anything.

Following is my css:

body {
  behavior: url(css3pie/PIE.htc);
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    /*background:url("../image/bg.png") repeat scroll 0 0 transparent;*/
    background: -webkit-gradient(linear, left bottom, left top, from(#5AE), to(#036)); 
}

Thanks

Solution 1

-webkit-gradient() is for webkit browsers only (Safari, Chrome, etc). This means it will not work in Firefox, Internet Explorer, Opera, or any other browser that does not support -webkit-gradient().

If you want to get gradient in all modern browsers, try the following code:

Generated at http://projects.korrelboom.com/gradient-generator/:

/* SVG fallback(Opera 11.10-, IE9) */
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDAsNTEsMTAyLDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoODUsMTcwLDIzOCwxKTsiIC8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIC8+PC9zdmc+);

/* Opera 11.10+ */
background: -o-linear-gradient(top, rgba(0,51,102,1), rgba(85,170,238,1));

/* Firefox 3.6+ */
background: -moz-linear-gradient(top, rgba(0,51,102,1), rgba(85,170,238,1));

/* Chrome 7+ & Safari 5.03+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,51,102,1)), color-stop(1, rgba(85,170,238,1)));

/* Newer Browsers */
background: linear-gradient(top, rgba(0,51,102,1), rgba(85,170,238,1));

/* IE5.5 - IE7 */
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FF003366,EndColorStr=#FF55AAEE);

/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FF003366,EndColorStr=#FF55AAEE)"

Note: You don't need any external JavaScript library to get gradients in IE. Simply use the CSS from above ;) However, for your own sanity, I would suggest using a preprocessor such as LESS or SASS so you can have all of the browser-specific versions automatically generated.

Solution 2

The CSS3 PIE documentation has this example for linear gradients:

#myElement {
    background: #CCC; /*fallback for non-CSS3 browsers*/
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
    background: -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
    background: -moz-linear-gradient(#CCC, #EEE); /*gecko*/
    background: -ms-linear-gradient(#CCC, #EEE); /*IE10*/
    background: -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
    background: linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
    -pie-background: linear-gradient(#CCC, #EEE); /*PIE*/
    behavior: url(PIE.htc);
}

You are missing the -pie-background property.

As an aside, you should use the "new webkit" syntax instead of the one you currently have; it's been quite a while since Webkit abandoned it.

Solution 3

For IE8 you can add this

background: #aaa;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#aaaaaa',GradientType=1);

For IE9 the following will work

background-image: -ms-linear-gradient(left, #111, #aaa);

Comments

[Kenci]

Thanks for answser! i will keep your suggestion in mind. @bfrohs answer is copy/pastable.

[mddw]

I think you can't do all gradients with filter, per example gradients stoping at x%. Or is there another filter notation ?

[0b10011]

@Neil, it makes the SVG into a URL (paste value of url() into your browser location bar).

[Neil]

I know what a data: URL is, I was just doubting the effectiveness of the base64 encoding.

[Mircea]

Even if this works, this is wrong. For once you are downloading an extra resource, the SVG fallback. This will be loaded event if native CSS support will exist. This defies the whole purpose of CSS3 gradients. Second, do not use filters as fallbacks. They are not part of any standard. Just downgrade gently and let old things die.

[0b10011]

@Mircea, I completely agree with you. However, not everyone has the luxury of being allowed to downgrade gracefully, particularly in the corporate world. But, -moz-, -webkit-, and -o- prefixes are also not supposed to be used in public use, so, in an ideal world, these would not be included either.

[Ilya Streltsyn]

CSS gradients don't work for IE9 neither with -ms- prefix nor without it. "IE9 mode" of IE10 is not the same as the real IE9, it's for compatibility of the old code with the new browser, not for testing the new code in the old browser. In all shipped versions of IE10, unprefixed syntax should work, so there is no need in -ms-prefixed syntax.

[Ilya Streltsyn]

Since this answer was published, the gradients syntax has changed. The unprefixed version for the newer browser should read background: linear-gradient(to bottom, rgba(0,51,102,1), rgba(85,170,238,1)); (start point replaced with "to" + end point).