{"id":334324,"date":"2021-02-22T08:00:16","date_gmt":"2021-02-22T16:00:16","guid":{"rendered":"https:\/\/css-tricks.com\/?p=334324"},"modified":"2021-06-07T09:43:09","modified_gmt":"2021-06-07T16:43:09","slug":"getting-deep-into-shadows","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/getting-deep-into-shadows\/","title":{"rendered":"Getting Deep Into Shadows"},"content":{"rendered":"\n

Let\u2019s talk shadows in web design. Shadows add texture, perspective, and emphasize the dimensions of objects. In web design, using light and shadow can add physical realism and can be used to make rich, tactile interfaces.<\/p>\n\n\n\n\n\n\n\n

Take the landing page below. It is for cycling tours in Iceland. Notice the embellished drop shadow of the cyclist and how it creates the perception that they are flying above not only the content on the page, but the page itself, as though they are \u201cpopping\u201d over the screen. It feels dynamic and immediate, which is perfect for the theme of adventure.<\/p>\n\n\n\n

\"A
Credit: Kate Hahu<\/a><\/figcaption><\/figure>\n\n\n\n

Compare that with this next example. It\u2019s a \u201cflat\u201d design, sans shadows. In this case, the bike itself is the focal point. The absence of depth and realism allows the bike to stand out on its own.<\/p>\n\n\n\n

\"Screenshot
Credit: saravana<\/a><\/figcaption><\/figure>\n\n\n\n

You can appreciate the differences between these approaches. Using shadows and depth is a design choice; they should support the theme and the message you want the content to convey.<\/p>\n\n\n

Light and shadows<\/h3>\n\n\n

As we just saw, depth can enhance content. And what exactly makes a shadow? Light!<\/p>\n\n\n\n

It\u2019s impossible to talk about shadow without getting into light. It controls the direction of a shadow as well as how deep or shallow the shadow appears. You can\u2019t have one without the other.<\/p>\n\n\n\n

Google\u2019s Material Design<\/a> design system is a good example of employing light and shadows effectively. You\u2019ve certainly encountered Material Design\u2019s aesthetics because Google employs it on nearly all of its products.<\/p>\n\n\n\n

\n
\n
\"A<\/figure>\n<\/div>\n\n\n\n
\n
\"White<\/figure>\n<\/div>\n\n\n\n
\n
\"A<\/figure>\n<\/div>\n<\/div>\n\n\n\n

The design system takes cues from the physical world and expresses interfaces in three-dimensional space using light, surfaces, and cast shadows. Their guidelines on using light and shadows<\/a> covers this in great detail.<\/p>\n\n\n\n

In the Material Design environment, virtual lights illuminate the UI. Key lights create sharper, directional shadows, called key shadows. Ambient light appears from all angles to create diffused, soft shadows, called ambient shadows.<\/p><\/blockquote>\n\n\n\n

Shadows are a core component of Material Design. Compare that with Apple\u2019s Human Interface Guidelines<\/a> for macOS, where translucency and blurring is more of a driving factor for evoking depth.<\/p>\n\n\n\n

\n
\n
\"Screenshot<\/figure>\n<\/div>\n\n\n\n
\n
\"Screenshot<\/figure>\n<\/div>\n<\/div>\n\n\n\n

In this case, light is still an influential factor, as it allows elements to either blend into the desktop, or even into other panels in the UI. Again, it’s is a design choice to employ this in your interface. Either way, you can see how light influences the visual perception of depth.<\/p>\n\n\n

Light sources and color<\/h3>\n\n\n

Now that we understand the relationship between light and shadows, we ought to dig in a little deeper to see how<\/em> light affects shadows. We\u2019ve already seen how the strength of light produces shadows at different depths. But there\u2019s a lot to say about the way light affects the direction<\/strong> and color<\/strong> of shadows.<\/p>\n\n\n\n

There are two kinds of shadows that occur when a light shines on an object, a drop shadow<\/strong> and a form shadow<\/strong>.<\/p>\n\n\n\n

\"Photo<\/figure>\n\n\n

Drop shadows<\/h4>\n\n\n

A drop shadow<\/strong> is cast when an object blocks a light source. A drop shadow can vary in tone and value. Color terminology can be dense and confusing, so let\u2019s talk about tone<\/strong> and value<\/strong> for a moment.<\/p>\n\n\n\n

Tone is a hue blended with grey. Value describes the overall lightness or darkness of a color. Value is a big deal in painting as it is how the artist translates light and object relationships to color.<\/p>\n\n\n\n

\"Illustration<\/figure>\n\n\n\n

In the web design world, these facets of color are intrinsic to the color picker UI.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n

Form shadows<\/h4>\n\n\n

A form shadow<\/strong>, on the other hand, is the side of an object facing away from the light source. A form shadow has softer, less defined edges than a drop shadow. Form shadows illustrate the volume and depth of an object.<\/p>\n\n\n\n

The appearance of a shadow depends on the direction of light, the intensity of light, and the distance between the object and the surface where the shadow is cast. The stronger the light, the darker and sharper the shadow is. The softer the light, the fainter and softer the shadow is. In some cases, we get two distinct shadows for directional light. The umbra<\/em> is where light is obstructed and penumbra<\/em> is where light is cast off.<\/p>\n\n\n\n

\"Two<\/figure>\n\n\n\n

If a surface is close to an object, the shadow will be sharper. If a surface is further away, the shadow will be fainter. This is not some abstract scientific stuff. This is stuff we encounter every day, whether you realize it or not.<\/p>\n\n\n\n

\"This<\/figure>\n\n\n\n

Light may also be reflected from sides of an object or another surface. Bright surfaces reflect light, dark surfaces absorb light.<\/p>\n\n\n\n

These are the most valuable facets of light to understand for web design. The physics behind light is a complex topic, I have just lightly touched on some of it here. If you\u2019d like to see explicit examples of what shadows are cast based on different light sources, this guide to drawing shadows for comics<\/a> is instructive.<\/p>\n\n\n

Positioning light sources<\/h3>\n\n\n

Remember, shadows go hand-in-hand with light, so defining a light source \u2014 even though there technically isn\u2019t one \u2014 is the way to create impressive shadow effects. The trick is to consistently add shadows relative to the light source. A light source positioned above an element will cast a shadow below the element. Placing a light source to the left of an element will cast a shadow to the right. Placing multiple light sources to the top, bottom, left and right of an element actually casts no shadow at all!<\/p>\n\n\n\n

\"Showing<\/figure>\n\n\n\n

A light source can be projected in any direction you choose. Just make sure it\u2019s used consistently in your design, so the shadow on one element matches other shadows on the page.<\/p>\n\n\n

Elevation<\/h3>\n\n\n

Shadows can also convey elevation<\/strong>. Once again, Material Design is a good example because it demonstrates how shadows are used to create perceived separation between elements. <\/p>\n\n\n\n

\"Showing
Credit: Nate Wilson<\/a><\/figcaption><\/figure>\n\n\n

Inner shadows<\/h3>\n\n\n

Speaking of elevation, the box-shadow<\/code> property is the only property that can create inner shadows for a sunken effect. So, instead of elevating up<\/em>, the element appears to be pressed in. That\u2019s thanks to the inset<\/code> keyword.<\/p>\n\n\n\n

That good for something like an effect where clicking a button appears to physically press it.<\/p>\n\n\n\n