Designing Beautiful Shadows in CSS

I’ve had this in my queue to read for a while, but it’s the kind of post you need to read in your browser not via a feed reader since the inline examples are so deep and illustrative. Anyway, I finally got to reading it’s excellent.

By using different shadows on [different elements], we create the impression that [one] is closer to us than [another]. Our attention tends to be drawn to the elements closest to us, and so by elevating [some elements over others], we make it more likely that the user focuses on it first.

Here's the first trick for cohesive shadows: every shadow on the page should share the same ratio. This will make it seem like every element is lit from the same very-far-away light source, like the sun.

Also of note: the difference between box-shadow and filter: drop-shadow() is really neat because box-shadow is, well, a shadow in the space of a box. However, with filter: drop-shadow() your shadow will follow the shape of your image or HTML element! filter is hardware-accelerated, so its more performant too!