cssbox-shadow

How to get rid off weird white line between 2 box-shadow?

I use 2 box-shadow to mimic spotlight effect. But got a weird white line between shadows?

Why this happened? How get rid of it?

Here is the bin: Spotlight Effect

enter image description here

UA: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

Solution

  • I don't think that there is a good solution to hide this transition in a cross browser way.

    May be one posibility is to make the div way bigger, and use only an inset shadow:

    .overlay {
  position: absolute;
  left: 150px;
  top: 150px;
  width: 2000px;
  height: 2000px;
  border-radius: 50%;  

  box-shadow: 0px 0px 24px 930px rgba(0,0,0,0.5) inset;
  transform: translate(-1000px, -1000px);
}

body {
   overflow: hidden;
}

.theimg {
	position: absolute;
	top: 0px;	
	left: 0px;
	height: 300px;
	width: 300px;
}
    <div class="theimg"></div>
<div class="overlay"></div>