In HTML/CSS, I’m trying to make a element look like a real object, viewed from directly above, by adding a shadow. The issue is, a real object that is touching the ground is “connected” to its shadow (e.g. if you cast a shadow while standing, your shadow is connected to you through your feet), while HTML/CSS elements are not, giving them the appearance of flat planes floating in mid-air. I made a quick mockup in Figma to illustrate my point:
The square on the left isn’t connected to its shadow, giving it the appearance of being a flat square floating in mid-air.
Meanwhile, the one on the right has diagonals connecting its top-right and bottom-left corners to those of its shadow, making it look a little closer to a rectangular prism touching the “ground”, viewed from above.
How can I recreate this effect in CSS? More broadly, how can I make elements look like real objects that have depth viewed from above, instead of floating flat planes?
To create this effect in Figma, I created a separate element made to look like a shadow and placed it behind the square on the right, but that’s a janky workaround that I def wouldn’t want to have to do so in CSS.
It can be done by stacking a bunch of box shadows with incremented offsets. It doesn’t give a perfectly uniform shadow, but it looks just fine with a little bit of blur. It’s also not a good idea to stack dozens of box-shadows for browser performance reasons, but anything below a dozen is really negligible.
Here’s a CodePen with a few ideas I quickly typed out:
You can also use box shadows to create an illusion of actual physical depth to elements, as I demonstrated in the last 2 boxes. You can use this online tool to generate code faster than typing it out by hand. Just replace “text-shadow” with “box-shadow” in the generated code and it works just fine.
The reason why CSS box shadows don’t have those diagonals connected the shadow to the vertices of the box is because this is actually the correct shadow casting a flat plane floating over a background would create. When we see shadow connected to our feet in real life, that’s because our feet are resting on the ground. An element floating over a background as a 2D plane is not touching the ground at any point, thus its shadow does not meet the vertices of the shape.
But I understand you may be building something that requires more than just a floating 2D plane : )
Josh Comeau wrote an excellent article explaining how to make realistic and beautiful shadows in CSS. A great read if you’re just looking to improve your basic shadow effects.
You’re welcome. The trick to hiding the jagged edging the stacking would create is to match the offset increment to the blur radius. If you have no blur radius at all, then you’ll have to offset it pixel-by-pixel. But increasing the blur saves on the amount of layers you need.
Also, since you’re stacking, you need to lower the opacity (alpha) of the shadow color per layer, since the color adds up with each layer.
With that in mind, you can come up with your own stacked box shadows that look clean too.
