Is it possible to set transparency in CSS3 box-shadow?

Question

Is it possible to set transparency on the box shadow?

This is my code:

  box-shadow:10px 10px 10px #000;   -webkit-box-shadow:10px 10px 10px #000;   -moz-box-shadow: 10px 10px 10px #000; 

Answer 1

I suppose rgba() would work here. After all, browser support for both box-shadow and rgba() is roughly the same.

/* 50% black box shadow */ box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 

div {      width: 200px;      height: 50px;      line-height: 50px;      text-align: center;      color: white;      background-color: red;      margin: 10px;  }    div.a {    box-shadow: 10px 10px 10px #000;  }    div.b {    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);  }

<div class="a">100% black shadow</div>  <div class="b">50% black shadow</div>