🎉 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-…
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.