How to keep transparent radial background smooth in browsers other than Chrome?

[Historical Forums User]

I am using CSS background gradients to create a transparent radial gradient effect. If you look here in Chrome: http://dev.aaronpitts.ch/unitymedia/index.html you will see it working how I want (the Social Media, SEM, Web Design and Begin your journey backgrounds). The problem is the other browsers don’t keep it smooth and cut off the edges. Any ideas?

This is the code I’m using:

#home-services article {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM4YjhiOGIiIHN0b3Atb3BhY2l0eT0iMC4zNyIvPgogICAgPHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC44NCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-radial-gradient(center, ellipse cover,  rgba(139,139,139,0.37) 0%, rgba(255,255,255,0.84) 75%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(139,139,139,0.37)), color-stop(75%,rgba(255,255,255,0.84)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(139,139,139,0.37) 0%,rgba(255,255,255,0.84) 75%,rgba(255,255,255,1) 100%);
    background: -o-radial-gradient(center, ellipse cover,  rgba(139,139,139,0.37) 0%,rgba(255,255,255,0.84) 75%,rgba(255,255,255,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover,  rgba(139,139,139,0.37) 0%,rgba(255,255,255,0.84) 75%,rgba(255,255,255,1) 100%);
    background: radial-gradient(ellipse at center,  rgba(139,139,139,0.37) 0%,rgba(255,255,255,0.84) 75%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e8b8b8b', endColorstr='#ffffff',GradientType=1 );
    text-shadow: 2px 2px 0px #FFF;
}

[Paulie_D]

Try something like

background: radial-gradient (ellipse closest-side, rgba(139,139,139,0.37) 0%,rgba(255,255,255,0.84) 75%,rgba(255,255,255,1) 100%);

I think that would be your most optimal solution: http://jsfiddle.net/9RVNH/3/

https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient

[Author]

Posts