Home/ Questions/Q 9155717
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T12:38:47+00:00

I have this code below which creating a background radial circle gradient. it’s working

  • 0

I have this code below which creating a background radial circle gradient.

it’s working well on all browsers except IE (not working even on IE9)

what should I add to the css in order for it to work also on IE9 and IE8?

http://jsfiddle.net/bhBtw/

The code:

<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <style type="text/css" media="screen">
        html { 
            background-color: #eee;
            height:768px;
        }
        div {
            width: 96%;
            height: 800px;
            padding: 10px;
            margin:0 auto;
        }

        div.circle {
            background-image: radial-gradient(center center, circle cover, #352e24, #1a160d);
            background-image: -o-radial-gradient(center center, circle cover, #352e24, #1a160d);
            background-image: -ms-radial-gradient(center center, circle cover, #352e24, #1a160d);
            background-image: -moz-radial-gradient(center center, circle cover, #352e24, #1a160d);
            background-image: -webkit-radial-gradient(center center, circle cover, #352e24, #1a160d);
        }
    </style>
</head>
    <body>
        <div class="circle"></div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    1. IE up to and including 9 don’t support CSS gradients. So it shouldn’t work in IE 9 and older.
    2. There is no need for the -ms-linear-gradient line. Gradients are supported unprefixed in IE10 and they are not supported at all in IE9 and older.
    3. You should always put the unprefixed version last. Even browsers that support the unprefixed syntax will still use the prefixed one if you don’t put the unprefixed version last.
    4. The new gradient syntax uses farthest-corner instead of cover. And that’s the default value, so you can leave it out.
    5. center is the default value for position (so you can leave that out as well).

    What should you do for IE9 and older? Not much. Fallback on:

    • a linear IE filter gradient or
    • a background image with that gradient or
    • just a solid color (the option I’d go with in this case, given that the two colors you’re using here are not that different from one another and most people couldn’t even tell there’s a gradient there without looking closely)

    So that code should become:

    background: #352e24; /* ultimate fallback, always put this, just in case */

/* if you choose the IE filter linear gradient fallback */
filter: progid:DXImageTransform.Microsoft.gradient(
             startColorstr=#352e24, endColorstr=#1a160d);

/* if you choose to use the image fallback */
background: url(gradient.png);

/* Chrome, Safari */
background: -webkit-radial-gradient(circle, #352e24, #1a160d);

/* Firefox 15 and older, Firefox for Android */
background: -moz-radial-gradient(circle, #352e24, #1a160d);

/* Opera 11.6 (older only supported linear), Opera 12.0, Opera Mobile 12.0 */
background: -o-radial-gradient(circle, #352e24, #1a160d);

/* standard syntax, IE10, Firefox 16+, Opera 12.1+ */
background: radial-gradient(circle, #352e24, #1a160d);
    • 0