Skip to main content
Home / Articles /

Don’t Use Black for Shadows

That is, "don't use black for shadows over colored backgrounds." At every step of my design education I was taught this. For example, when adding a drop shadow as a layer style in Photoshop, don't just pick a black or a gray but sample a color from the background, then dial it back in opacity until it looks good. This is because shadows in real life are not black. They are darkened versions of whatever they sit on top of, because there is less light. Check out this shadow. If you were trying to recreate that, I don't think black at any opacity level would get it just right.

Now that we have the (awesome) RGBa in our CSS toolbox, I've been hearing and seeing people use dialed back black (e.g. rgba(0,0,0,0.5) ) for backgrounds and shadows. This is being taught and encouraged with comments like "the shadow color will pick up the background color because of the opacity". True, it will, but it will be mixed with black, not a deeper toned version of itself.

I've heard Dan Cederholm teach this at An Event Apart and in Bulletproof Web Design. Meagan Fischer also has a recent tutorial with black as the example shadow color. Dan and Meagan are better designers and smarter people than myself, so I'm not trying to get up in their grills. I think their point is that it's smarter and more future-proof to use black, because black can sit on any background color equally well, whereas a toned shadow only works on that tone.

My point is, if you are going to change the background color, you are making changes to CSS. So while you are doing that, just change the shadow tone also. If you can't control what the text/box shadow is going to be on top of then yes, use black. If you can, use a toned shadow.

View Demo

Or am I whack? Is using black basically the same thing as a "darker version of itself"? I just bring this up because I've been seeing this a lot lately and literally during school and at various jobs I've had were we always taught to tone shadows.

icon-link icon-logo-star icon-search icon-star