If CSS had a real lighting system, we would specify a position for one or more lights. It's common for that light source to be above and slightly to the left: In general, we should decide on a single light source for all elements on the page. The direction of the shadows depends on the position of the light: In the natural world, shadows are cast from a light source. Otherwise, it just looks like a bunch of blurry borders:

If our goal is to create the illusion of depth, we need each and every shadow to match. Here's the problem: by creating each shadow in isolation like this, you'll wind up with a mess of incongruous shadows. When I wanted an element to have a shadow, I'd add the box-shadow property and tinker with the numbers until I liked the look of the result. Link to this headingCreating a consistent environmentįor a long time, I didn't really use shadows correctly 😬. In order to achieve these goals, though, we need to take a holistic view of the shadows in our application. Either I want to increase the prominence of a specific element, or I want to make my application feel more tactile and life-like. When I use shadows, I do it with one of these purposes in mind. We can use elevation as a tool to direct attention. 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. 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. There's also a tactical benefit here as well. I want the applications I build to feel tactile and genuine, as if the browser is a window into a different world. Drag the 'Reveal' slider to see what I mean: If we use shadows strategically, we can create the illusion of depth, as if different elements on the page are floating above the background at different levels. Shadows imply elevation, and bigger shadows imply more elevation. But first, I wanna take a step back and talk about why shadows exist in CSS, and how we can use them to maximum effect. We'll get to the fun CSS trickery soon, I promise. Link to this headingWhy even use shadows?

After effects drop shadow on ground