Thread by @JoshWComeau

🎉 Brand-new blog post just published, all about creating lush, life-like shadows in CSS.

Check it out here:
→ joshwcomeau.com/css/designing-…

Or, keep reading for some highlights. 👇

First, I wanna clarify that this isn't all just about aesthetics. It's important to understand *why* shadows are such a powerful tool.

Shadows give our application depth and realism, and let us focus attention by elevating important elements.

In the past, when I wanted to add a shadow, I'd play with the numbers until I liked the way it looked. As a result, I had a mess of incongruous shadows, breaking the overall illusion of depth 😅

We can avoid this problem by understanding how shadows work.

With all of that precursor knowledge out of the way, we can jump to the ✨ effects ✨

We leverage two tricks to enhance our shadows:
• Layering
• Color-matching

Instead of a single shadow, here's what happens if we use 5!

We can play with the offsets and blur radius to create a diffuse, life-like shadow:

Most devs will use a transparent black as the shadow color. The problem with this is that it desaturates the shadow, leading to a "washed-out" quality.

If we pick a color based on the backdrop, it looks much more lush and natural:

This is one of my most value-packed tutorials ever. Seriously, I think you'll learn a ton of good stuff. We cover a bunch of stuff I haven't mentioned here, like how to incorporate these ideas into a design system, and how to add shadows to irregular shapes like a tooltip:

Read the full tutorial on my blog:
joshwcomeau.com/css/designing-…