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;
Add a comment
|
1 Answer
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>
answered Mar 28, 2011 at 12:05
-
4Worked for me and solved the enormous problem that color-based shadows only work for a given background, so you need to restyle them depending on what they'll be over which often isn't possible (a div that covers both a photo and white bg, in which case shadow looks pale on top of photo) Commented Dec 16, 2013 at 17:56
-
@jeremyclarke I was experiencing the same issue where I needed a button's shadow to work on multiple background colours without having to define a unique shadow colour for each background. Transparent black works like a true shadow. Commented Feb 22, 2015 at 12:55
-
3rgba() does not work for me, if I want to change chrome's
input:-webkit-autofill– SamuelCommented Jul 26, 2016 at 11:44 -
-
1@Chris K.: I'm afraid you won't be able to do this separately from the original box-shadow declaration. The closest you can get is with rgba() and CSS variables, but that means no support for named colors, and you have to apply the variables to the box-shadow declaration itself. background-color has a similar limitation, covered here. Also see stackoverflow.com/questions/40010597/… Commented May 1, 2018 at 13:10