How to apply -webkit-gradient to IE?
css, css3pie, internet-explorer, webkit
Solution
`-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.
Problem
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