Translating drop shadow to box-shadow

One of my biggest frustrations with CSS3 is that it doesn’t directly mirror many of the options that designers have in creating elements, making it more difficult than it should be to recreate them in CSS. The box-shadow property is a really good example of this.

In Photoshop, when a designer adds a drop shadow, they add the blending options and adjust to their liking the distance, angle and depth of the shadow. They also choose a color. These are all fairly easy to reproduce in box-shadow. Angle and depth of the shadow are covered by the first two digits of the shorthand property. Distance is covered by the last pixel value. Color is the last property, seems pretty easy to set right? Wrong.

The major issue here is that the default “Blend Mode” setting for drop shadow in Photoshop is “Multiply”. This is a light filtering setting that physically changes how the shadow interacts with the colors that are below it. Box shadow does not work like this, its not as sophisticated.

What can we do?

One way to give yourself a better translation is to change the “Blend Mode” to “Normal” and adjust your color to whatever you want. Then copy that value and plug it into your style sheet. This will give you the closest approximation to the color you want.

But what if I’m not the designer?

This is the issue I run into the most: I am just translating a design in HTML/CSS. So how do I find the correct value?

1. Go to Photoshop, open up the Blending options and change some of the settings in the drop shadow
2. Set the size of the drop shadow to 1 and the distance to 10
3. Now there should be a solid version of the box to sample color from
4. On a Mac, open DigitalColor Meter and sample the hex value
5. Plug that hex value into your rule and you should be good to go