Seamless shadow for blur
I am trying to make a div look like a white glowing circle with no edges. Css is achieved with:
body {
background: #000;
}
div {
border-radius: 50%;
/* makes the div background circular */
background: white;
height: 275px;
width: 275px;
box-shadow: 0px 0px 220px 279px #fff;
/* creates glow effect */
}
<div></div>
When a problem occurs, it looks like this:
The problem is that some screens have a line separating the circle from the glow. I am trying to achieve a seamless glow without a circle. I tried filter:blur
it but this is not an option as it blurs the logo image nested inside the div.
The problem is with the landing page of this site .
source to share
Buggy rendering in Chrome appears to be called blur-radius
and hidden spread-radius
; this only happens for large values blur-radius
. With trial and error, you can use spread-radius
it to hide the error.
It's not perfect, but it works:
box-shadow: 0px 0px 140px 300px #FFF;
These are the changes that work on your site. Place the border radius and box shadow on the outer div to exclude the gray ring.
#logo-outer {
margin: 10px auto;
width: 275px; /* increase width to match #logo */
background: none repeat scroll 0% 0% #FFF;
border-radius: 50%;
box-shadow: 0px 0px 140px 300px #FFF; /* change the box shadow blur and spread */
}
#logo {
height: 275px;
width: 275px;
background: none repeat scroll 0% 0% #FFF;
}
This is how it looks in Chrome
Workaround example
body {
background: #000;
}
div {
border-radius: 50%;
height: 250px;
width: 250px;
box-shadow: 0 0 140px 300px #fff;
background: #FFF;
}
<div></div>
source to share