Data Integration

Bonus: drop-shadow

Throughout this tutorial, we've been using the box-shadow property. box-shadow is a great well-rounded tool, but it's not our only shadow option in CSS. 😮

Take a look at filter: drop-shadow:

The syntax looks nearly identical, but the shadow it produces is different. This is because the filter property is actually a CSS hook into SVG filters. drop-shadow is using an SVG gaussian blur, which is a different blurring algorithm from the one box-shadow uses.

There are some other important differences between the two, but right now I wanna focus on drop-shadow's superpower: it contours the shape of the element.

For example, if we use it on an image with transparent and opaque pixels, the shadow will only apply to the opaque ones:

This works on images, but it also works on HTML elements! Check out how we can use it to apply a shadow to a tooltip that includes the tip.

(It's subtle, since we're using a soft shadow; try reducing the blur radiuses to see the contouring more clearly!)

One more quick tip: unlike box-shadow, the filter property is hardware-accelerated in Chrome, and possibly other browsers*. This means that it's managed by the GPU instead of the CPU. As a result, the performance is often much better, especially when animating. Just be sure to set will-change: transform to avoid some Safari glitch bugs.

We're veering too far off-topic, but suffice it to say that the filter property is very compelling. I plan on writing more about it in the future. And, naturally, it's covered in depth in CSS for JavaScript Developers!

I hope this tutorial inspired you to add or tweak some shadows! Honestly, very few developers put this level of thought into their shadows. And it means that most users aren't used to seeing lush, realistic shadows. Our products stand out from the crowd when we put a bit more effort into our shadows.