Creative Ref

Users tend to respect a very dense visual field so long as that density is consistent and easily navigable, and the user testing I do shows that people tend to get more distracted when the ’noise’ comes from inconsistency rather than from volume itself.

The box-shadow CSS property isn’t exactly built to encourage expressiveness. It essentially produces a blurred silhouette of an object—you can change its offset, blur radius, spread, and color, but that’s it. We can’t get anywhere near to expressing the complexities and nuances of shadows in real life.

Look at how square and clumsy the default box-shadow effect (first box) looks compared to the layered box-shadow (second box). We can achieve this effect by creating multiple box-shadows (separating each shadow with a comma), and increasing the offset and blur for every shadow (the box-shadow syntax is X-offset Y-offset blur color)

When I look around the web, though, it's clear that most shadows aren't as rich as they could be. The web is covered in fuzzy grey boxes that don't really look much like shadows.In this tutorial, we'll learn how to transform typical box-shadows into beautiful, life-like ones

By using different shadows on the header and dialog box, we create the impression that the dialog box is closer to us than the header is. Our attention tends to be drawn to the elements closest to us, and so by elevating the dialog box, we make it more likely that the user focuses on it first. We can use elevation as a tool to direct attention.When I use shadows, I do it with one of these purposes in mind. Either I want to increase the prominence of a specific element, or I want to make my application feel more tactile and life-like.

If you're in a well-lit room, press your hand against your desk (or any nearby surface) and slowly lift up. Notice how the shadow changes: it moves further away from your hand (larger offset), it becomes fuzzier (larger blur radius), and it starts to fade away (lower opacity). If you're not able to move your hands, you can use reference objects in the room instead. Compare the different shadows around you.Because we have so much experience existing in environments with shadows, we don't really have to memorize a bunch of new rules. We just need to apply our intuition when it comes to designing shadows. Though this does require a mindset shift; we need to start thinking of our HTML elements as physical objects.

So, to summarize:Each element on the page should be lit from the same global light source.The box-shadow property represents the light source's position using horizontal and vertical offsets. To ensure consistency, each shadow should use the same ratio between these two numbers.As an element gets closer to the user, the offset should increase, the blur radius should increase, and the shadow's opacity should decrease.

By layering multiple shadows, we create a bit of the subtlety present in real-life shadows.

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.