Background gradient css not working in IE10

Question

I am trying to create a website and wanted to make sure about all the browser but my CSS is not working in IE please tell whats wrong with my CSS. Which of that is not supporting in IE my CSS

.ui-widget-header {
    border: 1px solid #E1712B !important;
    background-image:linear-gradient(to bottom, #F8B84B 30%,#F7AF39 70%);
    color: #ffffff;
    font-weight: bold;
}

Well, which version of IE are we talking about? Only [gradients](http://caniuse.com/#feat=css-gradients) aren't supported in — Vucko, Dec 10 '14 at 12:40
its IE 10 and still not working.but want to make code such that it should work well in 9,10,11 — Sumeet, Dec 10 '14 at 12:44
possible duplicate of [CSS3 cross browser linear gradient](http://stackoverflow.com/questions/7546638/css3-cross-browser-linear-gradient) — Vucko, Dec 10 '14 at 12:45
background-image:linear-gradient(to bottom, #F8B84B 30%,#F7AF39 70%); — Sumeet, Dec 10 '14 at 12:46

score 0 · Answer 1 · answered Dec 10 '14 at 12:46

I've tried at my IE and worked. I added width and height:

.ui-widget-header {
    border: 1px solid #E1712B !important;
    background-image:linear-gradient(to bottom, #F8B84B 30%,#F7AF39 70%);
    color: #ffffff;
    font-weight: bold;
    width:100px;
    height:100px;
}

here is the jsfiddle: http://jsfiddle.net/oLcfcfvL/

For older versions you can try a gradient generator:

http://css3generator.com/

http://www.colorzilla.com/gradient-editor/

used gradient generator thanks a lot It helped a lot – Sumeet Dec 10 '14 at 12:57 — Sumeet, Dec 10 '14 at 12:57

score 0 · Answer 2 · answered Dec 10 '14 at 12:47

You have problem with Background if I see right. You need to use more then 1 property for linear gradient:

on <head> add this:

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

In CSS:

  .ui-widget-header {
        border: 1px solid #E1712B !important;
        background: #f8b84b; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiNmOGI4NGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI3MCUiIHN0b3AtY29sb3I9IiNmN2FmMzkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top,  #f8b84b 30%, #f7af39 70%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#f8b84b), color-stop(70%,#f7af39)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #f8b84b 30%,#f7af39 70%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #f8b84b 30%,#f7af39 70%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #f8b84b 30%,#f7af39 70%); /* IE10+ */
        background: linear-gradient(to bottom,  #f8b84b 30%,#f7af39 70%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8b84b', endColorstr='#f7af39',GradientType=0 ); /* IE6-8 */

        color: #ffffff;
        font-weight: bold;
    }

and you can use Ultimate CSS Gradient tool

Why add `filter: none;` for `gte IE 9` if [filters aren't supported in IE](http://caniuse.com/#feat=css-filters)? — Vucko, Dec 10 '14 at 12:52
I was asked earlier, and on test IS work on IE for some reason, but only when it comes to this stuff. I do not understand the logic, but I think it's a matter of releases of IE9 And you can see that on Ultimate CSS Gradient tool. — Ivijan Stefan Stipić, Dec 10 '14 at 12:56

Background gradient css not working in IE10

2 Answers2