Is there a ‘box-shadow-color’ property?

by

Actually… there is! Sort of. box-shadow defaults to color, just like border does.

According to http://dev.w3.org/…/#the-box-shadow

The color is the color of the shadow. If the color is absent, the used
color is taken from the ‘color’ property.

In practice, you have to change the color property and leave box-shadow without a color:

box-shadow: 1px 2px 3px;
color: #a00;

Support

  • Safari 6+
  • Chrome 20+ (at least)
  • Firefox 13+ (at least)
  • IE9+ (IE8 doesn’t support box-shadow at all)

Demo

div {
    box-shadow: 0 0 50px;
    transition: 0.3s color;
}
.green {
    color: green;
}
.red {
    color: red;
}
div:hover {
    color: yellow;
}

/*demo style*/
body {
    text-align: center;
}
div {
    display: inline-block;
    background: white;
    height: 100px;
    width: 100px;
    margin: 30px;
    border-radius: 50%;
}
<div class="green"></div>
<div class="red"></div>

The bug mentioned in the comment below has since been fixed 🙂

Leave a Comment

tech