Box Shadow Inherits Color

Unfortunately box shadow must be defined as a single rule, without the ability, like border, to be broken up into separate parts for positioning, color and distance.

There is however one trick to allowing for a single box shadow definition to appear as multiple colors.

Box shadow inherits its color from an unlikely place if none is specified, the color attribute of the element.

.widget {
  -webkit-box-shadow: 0em 0.2em 0em inset;
  -moz-box-shadow: 0em 0.2em 0em inset;
  box-shadow: 0em 0.2em 0em inset;
}
/* This will also have a red box shadow */
.red.widget {
  color: #FF0000;
}

For more CSS tips, visit Semantic UI CSS Guide