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

@RobW: Definitely not a dupe, this one specifically mentions the CSS3pie compatibility shim. — Jon, Apr 15 '12 at 19:47

score 8 · Accepted Answer · edited Apr 15 '12 at 20:06

-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.

I think you can't do all gradients with filter, per example gradients stoping at x%. Or is there another filter notation ? — mddw, Apr 15 '12 at 20:07
@Neil, it makes the SVG into a URL (paste value of `url()` into your browser location bar). — 0b10011, Apr 15 '12 at 20:19
I know what a data: URL is, I was just doubting the effectiveness of the base64 encoding. — Neil, Apr 15 '12 at 20:40
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. — Mircea, Apr 16 '12 at 23:39
@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. — 0b10011, Apr 17 '12 at 13:49
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). — Ilya Streltsyn, Jul 23 '13 at 17:18

score 7 · Answer 2 · answered Apr 15 '12 at 19:49

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.

Thanks for answser! i will keep your suggestion in mind. @bfrohs answer is copy/pastable. — Kenci, Apr 15 '12 at 20:02

score 1 · Answer 3 · edited Jul 23 '13 at 22:18

1

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);

edited Jul 23 '13 at 22:18

Andrew Barber

39,603
20
94
123

answered Jul 23 '13 at 16:43

Atoz Webhelp

11
2

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 Jul 23 '13 at 17:14

score 0 · Answer 4 · answered May 09 '13 at 07:23

Use this tool for generate your Css style
http://www.colorzilla.com/gradient-editor/
click Import from css

background: rgb(85,170,238); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU1YWFlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDMzNjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(85,170,238,1) 0%, rgba(0,51,102,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(85,170,238,1)), color-stop(100%,rgba(0,51,102,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(85,170,238,1) 0%,rgba(0,51,102,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(85,170,238,1) 0%,rgba(0,51,102,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(85,170,238,1) 0%,rgba(0,51,102,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(85,170,238,1) 0%,rgba(0,51,102,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55aaee', endColorstr='#003366',GradientType=0 ); /* IE6-8 */

How to apply -webkit-gradient to IE?

4 Answers4

Linked