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

Question

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;
}

not to me in the latest firefox, safari and opera on mac. Only in chrome — user1280853, Feb 12 '14 at 12:21
if you hover over the element it will show more because I make the background change colour on hover — user1280853, Feb 12 '14 at 12:22

score 2 · Accepted Answer · answered Feb 12 '14 at 13:16

2

To avoid having the gradient cut off you need to stop it before it reaches the closest side of the container.

Fortunately, there is a keyword property in the gradient syntax closest-side.

JSfiddle Demos (of various options)

CSS for closest-side using obvious gradient

.closest-side {
    background: radial-gradient(
     ellipse closest-side, 
     rgba(0,0,0,1) 0%,
     rgba(255,255,255,1)75%,
     rgba(0,0,0,1) 100%);
}

answered Feb 12 '14 at 13:16

Paulie_D

107,962
13
142
161

Ok great that works thanks, just one question. Why does Chrome produce a lighter gradient, if you look at my updated site now: http://dev.aaronpitts.ch/unitymedia/index.html you will see the gradient is more prominent in firefox and safari. How can I level them out? Thanks a lot – user1280853 Feb 12 '14 at 16:00

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

1 Answers1