CODEWITHSUNDEEP
cssbox-shadow
aztack
aztack

Reputation: 4594

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

Upvotes: 3

Views: 1514

Answers (3)

Matthias De Deyn
Matthias De Deyn

Reputation: 31

I found the best way to overcome this! have been struggling with this issue for a bit. the solution is not perfect but its better then other stuff that i found on stack.

https://css-tricks.com/clipping-masking-css/#aa-masking

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="200">
  <defs>
    <filter id="filter">
      <feGaussianBlur stdDeviation="5" />
    </filter>
    <mask id="mask">
      <ellipse cx="50%" cy="50%" rx="25%" ry="25%" fill="white" filter="url(#filter)"></ellipse>
    </mask>
  </defs>

  <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="170" height="200" mask="url(#mask)"></image>
</svg>

Upvotes: 0

vals
vals

Reputation: 64174

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>

Upvotes: 1

Wim Mertens
Wim Mertens

Reputation: 1790

You can solve it by adding another box-shadow declaration:

In FF:

box-shadow: 
    0 0 24px 30px rgba(0,0,0,0.5) inset, 
    0 0 100px 1000px rgba(0,0,0,0.5),
    0 0 0 rgba(0,0,0,0.5) inset;
}

https://jsfiddle.net/sLpx6eL7/

In Chrome it displays a little different. Best to work with solid colors or adjust the transparency:

https://jsfiddle.net/sLpx6eL7/1/

Upvotes: 0

Related Questions