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


Tags: css,css3,background,radial-gradients

Problem :

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


Solution :

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

    CSS Howto..

    How to center div using JQuery or CSS

    How to create a scrolling background image with css/jquery/html

    css hover : aligning on bottom: how to align on top?

    How to vertically center multiline text with an image on its left?

    How to move img src a few pixels down in html page

    How to get conditional css to work on Blogger/Blogspot?

    How to fit label “css width”

    How do I make a textarea resize properly when I resize browser window?

    How insert value from Ruby in CSS file

    How do I keep my HTML elements on the same horizontal plane inside a parent DIV?

    CSS: How to center a bottom-fixed menu

    How to call a image class on a regular interval

    How to get the header and navbar on top?

    How to override CSS style for a specific element if its parent has a specific class

    How do I make menu background even with the header in HTML/CSS

    how to make layers not overlap with each other in css [closed]

    How do I get
    margin working?

    How to target a specific element of a div in CSS?

    How to programmatically ungroup CSS selectors?

    How to fit a dynamic PHP form in a div (to be able to fit fullpage.js)?

    How to capture a CSS multiline comment block with JavaScript regex

    How to force enter key to make a line break inside iframe editor

    How to use CSS to horizontally fill the width of page with HTML menu headers?

    How to create CSS heart? / Why is this CSS creating a heart shape?

    How to change textbox style in css

    CSS hover transition - how to remove delay?

    How to check if css value is supported by the browser?

    How to make divs re-arrange when another div is positioned between existing?

    How to get the CSS left-property value of a div using JavaScript?

    How to.. the middle div of three ever on center and if the navigator are resized