I'm experimenting with creating an element using a radial gradient effect. My initial approach was to use a white circular container and apply a white box shadow. However, I encountered some issues where the color of the shadow did not match the background color of the div in Chrome, and the border-radius property caused a strange border in Firefox.
I would appreciate any suggestions or feedback on this. I have set up a codepen for reference, but here is the snippet...
http://codepen.io/syren/pen/tcdBz
div.feature{
background:#000;
width:100%;
height: 300px;
}
div.text{
width: 300px;
height: 300px;
background: white;
padding: 130px 0 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 160px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
box-shadow: 0 0 50px 50px #fff;
margin: 0 auto;
}
Thank you!