How to display a box-shadow through a semi-transparent div?

Question

I have a div element with this css :

  height: 50px;
  width: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 20px 20px 5px red;

And despite the fact that it's semi transparent, I can't see the red shadow under the div. Is there any way to display it ?

edit : as it's probably a rendering issue, I tested in Google Chrome, Firefox and IE, same result.

Answer 1

You can not get this with a box-shadow, as far as I know.

You can get it with a pseudo element:

.test {
    height: 50px;
    width: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
}

.test:after {
    content: "";
    width: 100%;
    height: 100%;
    left: 20px;
    top: 20px;
    background-color: red;
    box-shadow: 0px 0px 5px red;
    position: absolute;
    z-index: -1;
}

I have set a shadow in the pseudo element only for the blurring. The other shadow properties go to the left and top properties of the pseudo element.

fiddle