Working modularly in CSS is smart. It allows us to be DRY in our approach to styling a page or element. What does that have to do with box-shadow? Let’s look at an example to see how we can avoid duplicating lines of code with this simple box-shadow color hack.

First, let’s look at the syntax for the box-shadow components so we’re all on the same page.

box-shadow: 
  x offset, 
  y offset, 
  blur radius, 
  spread distance, 
  color, 
  inset keyword;

The piece we’re concerned with today is the color component.

According to the W3C CSS Specification for box-shadow, “If the color is absent, the used color is taken from the ‘color’ property.”

So, what?

If I have a base module that looks like this:

.my-module {
background: pink;
color: orange;
padding: .5em;
box-shadow: 0 0 0 10px orange;
}

And variations of this module that looks like this:

.my-module.brand-hilite {
color: green;
box-shadow: 0 0 0 10px green;
}
.my-module.brand-secondary-hilite {
color: blue;
box-shadow: 0 0 0 10px blue;
}
.my-module.hero {
box-shadow: 0 0 0 20px green;
}

What happens when I want to change the color of the shadow on my .hero sub-module? Do I duplicate each sub-module combining the hilite and hero variations? That would be a mess!

.my-module.brand-hilite {
color: green;
box-shadow: 0 0 0 10px green;
}
.my-module.brand-secondary-hilite {
color: blue;
box-shadow: 0 0 0 10px blue;
}
.my-module.hero {
box-shadow: 0 0 0 20px green;
}
.my-module.brand-secondary-hilite.hero {
color: blue;
box-shadow: 0 0 0 20px blue;
}
.my-module.brand-hilite.hero {
color: green;
box-shadow: 0 0 0 20px green;
}

That’s a crap load of extra code to achieve something very minor, right? Check this out. Our box-shadow color matches our text color in each module variation. So, let’s drop the color component from the box-shadow declaration all together and let the module inherit it, like so.

.my-module {
background: pink;
color: orange;
padding: .5em;
box-shadow: 0 0 0 10px;
}
.my-module.brand-hilite {
color: green;
box-shadow: 0 0 0 10px;
}
.my-module.brand-secondary-hilite {
color: blue;
box-shadow: 0 0 0 10px;
}
.my-module.hero {
box-shadow: 0 0 0 20px;
}

Those 25 lines of code refactor to 17 lines in this theoretical example. If we use Sass or another CSS pre-compiler, we can refactor it further.

But what about the real world?

A recent project called for a series of “halos”, at least that’s how I refer to them. Each halo receives a different color based on the context, be that WordPress post category or otherwise. I wrote a simple Sass mixin to do most of the dirty work:

$colors: green $green, blue $blue, grey $grey;

@each $i in $colors {
  .halo-#{nth($i, 1)} { 
    background: nth($i, 2);
    color: rgba( nth($i, 2), .33 );
  }
}

We simply loop over our color keywords, which represent a css class name, and set the color property to the variable associated with each color keyword. Easy enough.

Here’s an example on CodePen:

See the Pen Box Shadow Color Hack by Jacob Dubail (@jacobdubail) on CodePen