The Tricks
Layering
Modern 3D illustration tools like Blender can produce realistic shadows and lighting by using a technique known as raytracing.
Design with Ease
“Do you have a design in mind for your blog? Whether you prefer a trendy postcard look or you’re going for a more editorial style blog - there’s a stunning layout for everyone.”
In raytracing, hundreds of beams of lights are shot out from the camera, bouncing off of the surfaces in the scene hundreds of times. This is a computationally-expensive technique; it can take minutes to hours to produce a single image!
Web users don't have that kind of patience, and so the box-shadow algorithm is much more rudimentary. It creates a box in the shape of our element, and applies a basic blurring algorithm to it.
As a result, our shadows will never look photo-realistic, but we can improve things quite a bit with a nifty technique: layering.
Instead of using a single box-shadow, we'll stack a handful on top of each other, with slightly-different offsets and radiuses:
By layering multiple shadow
s, we create a bit of the subtlety present in real-life shadows.
This technique is described in detail in Tobias Ahlin's wonderful blog post, “Smoother and Sharper Shadows with Layered box-shadow”.
Performance Tradeoff
Layered shadows are undeniably beautiful, but they do come with a cost. If we layer 5 shadows, our device has to do 5x more work! This isn't as much of an issue on modern hardware, but it can slow rendering down on older inexpensive mobile devices. As always, be sure to do your own testing! In my experience, layered shadows don't affect performance in a significant way, but I've also never tried to use dozens or hundreds at the same time. Also, it's probably a bad idea to try animating a layered shadow.
Color-matched Shadows
So far, all of our shadows have used a semi-transparent black color, like hsl(0deg 0% 0% / 0.4). This isn't actually ideal.
When we layer black over our background color, it doesn't just make it darker; it also desaturates it quite a bit.
Putting it all together
We've covered 3 distinct ideas in this tutorial:
Creating a cohesive environment by coordinating our shadows.
Using layering to create more-realistic shadows.
Tweaking the colors to prevent “washed-out” gray shadows.
Comments