'Small space between box shadow and div when alpha set

Fiddle here: http://jsfiddle.net/17zyydx1/

There's a gap on the left and right sides of the div, between the div and the box shadow.

It's most obvious on Firefox, but it's still noticeable on Chrome/Safari.

The offender:

.title {
  position: absolute;
  border: 0 none;
  border-radius: 10px;
  width: 375px;
  height: 150px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5);
}

I've tried setting border to 0 none, as you can see. Margin 0 does nothing, padding 0 does nothing (worth a shot), changing to a 1:1 ratio only makes it worse.

Removing the alpha makes it go away, but that's throwing the baby away with the bathwater.

Anyone know what the deal is?

css


Solution 1:[1]

You can make three shadows as your shadow... One of them is your main shadow, you have to put it after two transparent shadows and adjust the two transparent shadows as you want. :)) 

#spsh{
background-color:cyan;
width:150px;
height:100px;
box-shadow:6px 6px 7px white , -6px 6px 7px white , 0px 20px 19px cyan;
}
<div id="spsh"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions