Render CSS3 gradient on IE9 with radial orientation

Question

Im using Colorzilla gradient generator(http://www.colorzilla.com/gradient-editor/) to create a radial gradient for my site and I wanted to have the ellipse at the bottom.

From

   background: #667de8; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM2NjdkZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxNSUiIHN0b3AtY29sb3I9IiM1NDZlYmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MyUiIHN0b3AtY29sb3I9IiMyODNjNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MSUiIHN0b3AtY29sb3I9IiMyODNjNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjgzYzVkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-radial-gradient(center, ellipse cover,  #667de8 0%, #546ebf 15%, #283c5a 63%, #283c5a 91%, #283c5d 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, bottom bottom, 100%, color-stop(0%,#667de8), color-stop(15%,#546ebf), color-stop(63%,#283c5a), color-stop(91%,#283c5a), color-stop(100%,#283c5d)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* W3C */

To

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM2NjdkZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxNSUiIHN0b3AtY29sb3I9IiM1NDZlYmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MyUiIHN0b3AtY29sb3I9IiMyODNjNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MSUiIHN0b3AtY29sb3I9IiMyODNjNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjgzYzVkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(bottom, ellipse cover,  #667de8 0%, #546ebf 15%, #283c5a 63%, #283c5a 91%, #283c5d 100%); /* FF3.6+ */
background: -webkit-gradient(radial, bottom bottom, 0px, bottom bottom, 100%, color-stop(0%,#667de8), color-stop(15%,#546ebf), color-stop(63%,#283c5a), color-stop(91%,#283c5a), color-stop(100%,#283c5d)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(bottom, ellipse cover,  #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(bottom, ellipse cover,  #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* Opera 12+ */
background: -ms-radial-gradient(bottom, ellipse cover,  #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* IE10+ */
background: radial-gradient(ellipse at bottom,  #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* W3C */

So I changed every occurrence of center to bottom, then I successfully generated a radial gradient with ellipse located at the bottom.

However in IE9 it fails to render bottom ellipse, and then I found out that the following code below needs also to be modified:

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM2NjdkZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxNSUiIHN0b3AtY29sb3I9IiM1NDZlYmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MyUiIHN0b3AtY29sb3I9IiMyODNjNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MSUiIHN0b3AtY29sb3I9IiMyODNjNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjgzYzVkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

So is there any way to modify the code(Data URI) to make the ellipse at the bottom? If it's impossible, how can I make the ellipse locate at the bottom part? Any thoughts would be greatly appreciated.

score 0 · Answer 1 · answered Nov 20 '13 at 07:53

0

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

please use ms filter IE9 beta 1. and any IE problem please visit this link http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/

answered Nov 20 '13 at 07:53

Bipin Kumar Pal

1,009
2
8
16

I appreciate your answer, thanks! However I found a tool that answers my question here it is http://ie.microsoft.com/TESTDRIVE/Graphics/SVGGradientBackgroundMaker/Default.html – Vincent Panugaling Nov 20 '13 at 07:56
please see this link; http://www.visualcsstools.com/ and http://angrytools.com/gradient/ – Bipin Kumar Pal Nov 20 '13 at 08:02
My apologies, but your answer doesn't work, I already tried it. sorry – Vincent Panugaling Nov 20 '13 at 08:05
Thanks! right now Im using visualcsstools.com it's much easy to use than the tool that ive saw – Vincent Panugaling Nov 20 '13 at 08:09
1

Sorry I can't vote since I don't have enough reputation, and also I can't mark your answer as an accepted since using -ms-filter is not the right solution. – Vincent Panugaling Nov 20 '13 at 09:02
Please stop asking for votes and read http://meta.stackexchange.com/questions/63439/begging-for-votes – andyb Nov 20 '13 at 09:20

Render CSS3 gradient on IE9 with radial orientation

1 Answers1