How to apply shadow in design

This design article will give an overview of the application and terminology of shadows in design.

What is a shadow?

A shadow is a dark area where light emitted from a light source is blocked by an opaque object. Shadows are shaped because light cannot transit through the opaque object. The object blocks the light and forces it to move past the blocking object and onto the next surface. The resulting shadow is a two-dimensional shape or a reverse projection of the object blocking the light.

The size of a shadow depends on the distance between the light source and the object blocking it. The closer the item is to the light source, the more it obstructs the light, resulting in a bigger, softer shadow. If the object is more distant, the shadow becomes sharper and smaller.

Dark, hard-edged drop-shadows suggest a dark room with a single light source. Light, soft-edged drop-shadows suggest a room rich with diffuse light.

The application of shadow in design

The placement and behavior of shadows are essential considerations in design. Gradients, highlights, and drop shadows create dimension in your design elements and direct the viewer's attention. Using shadows can dramatically improve your design's overall aesthetics and functionality and add levels of depth and realism.

In general, shadows in design should simulate the natural, real-world behavior of light and shadow-casting (key and ambient light) and blend into the design effectively.

To use shadows effectively in your design process, you must first understand the fundamental laws of shadow casting and its key elements.

The light source

The light source defines the direction and position of the incoming rays of the light source. Natural light has the sun's position as its only light source; artificial light permits multiple light sources.

The highlight

Defined as the highlight is the area that shines the brightest on an object; it is the point facing the light source and closest to it.

The core shadow

The core shadow signifies the darkest part of the object that is the furthest away from the light source. The darkness of shadows can vary in shade. The darkest area of the shadow is called the core shadow.

The cast shadow

The shadow itself is on the object, but the object itself creates the cast shadow. The cast shadow is projected on the surface the object is resting. The cast shadow always points in the same direction as the incoming rays but always to the opposite side of the object.

The application of shadow in design

The responsibility of a web designer is to create color patterns for light-emitting two-dimensional screens. The use of shadows creates depth and the illusion of space in 2D design. The shadow is an essential part of graphic design. There are countless ways to incorporate it into the image design process.

Drop-shadows and gradients are two of the most commonly used design elements. Other relevant elements are the shadow opacity, the shadow angle, the shadow offset, the shadow radius, and the shadow softness (often named blur).

The drop-shadows and gradient shadow elements are very easy to create with any graphics program, but the downside is that these two shadow effects frequently get over-used.

Shadows in skeuomorphic design

Especially in the Skeuomorphic Design period that peaked in its use from the early to mid-2000s, designers exhausted the layer styles of Photoshop and similar software programs to their maximum capacity, making especially screens of smaller sizes feel very cluttered and crowded. The icons were created with reflections, shadows, and correct alignment lines, creating a 3D feel.

Even though visual elements could vary, users could always make these two assumptions:

• Elements that look raised can be pressed down (e.g., buttons)
• Elements that look sunken can be filled in (e.g., input fields)

Windows UI on the left, Apple UI on the right Image on the left: Windows 95 Setup screen, image source: extremetech. Image on the right: Apple skeuomorphic Homescreen, image source: materialdesignblog

Shadows in material design

During the mid-2010s, the creative pendulum swung back to a more minimalist approach with the Flat Design trend and the development of the Material UI-design language.

Comparison of Flat Design and Material Design. Image source: Medium

The design and shadow behaviors were not about depicting objects from the real world as accurately as possible. It was all about clarity, order, continuity, and simplicity. The Flat Design approach omitted the z-axis for the ultimate simplicity. The lack of z-axis made incorporating shadows in the UI elements redundant.

The Material Design language, initially developed by Google, incorporated the z-axis in its clean and simplistic approach, focused on strict rules for its continuity and featured often animated transitions. Minimalistic shadows were used to create the illusion of depth. The new design approach allowed new opportunities to use color and space.

Shadows in neumorphic design

After almost a decade of a more simplistic 2D design approach, a new design language emerged: Neumorphism is prominently featured in macOS Big Sur. The icons and UI elements are designed with shading and highlights from a 12 o'clock light source. It reconnects to the physical, haptic approach of the skeuomorphic design but without excessive layer style shadows.

The behavior and projection of shadow are entirely different in the material and neumorphic design style.

Comparison Skeuomorphism, Flat Design, and Neumorphism. Image source: justinmind

Material Design cards look like they float with an indefinite shadow.

Neumorphic Design cards look like they are extruded from the background. The shadow projection and its interaction with light are entirely different.

Comparison Neumorphic card and Material card. Image source: uxdesign

Comparison Neumorphic card and Material card. Image source: uxdesign

Why you should incorporate shadows in your design

The purpose of shadows in 2D/UI design is not primarily to simulate 3D objects as realistically as possible for the user but to direct and ease the interface's navigation subtly.

Integrating shadows with a subtle, carefully calculated projection is an ideal way to make the design more accessible for its users.

If you choose to incorporate shadows in your design, remember there are many ways to implement them. Play around and test the different parameters we mentioned in our article. See how these settings affect the look and accessibility of your design.

Changing your shadow's opacity, angle, or color can make a world of difference in how your design appeals to the viewer. You can transform your design from business style to playful and fun by just altering the shadow color attributes f.ex.

Adjusting the blur or offset attributes of your shadows can redirect the user's attention to previously overlooked design elements.

Remember the basic guidelines we gave you, and have fun playing around with the shadow attributes!