How to Use Surface Elevation to Elevate Your Interface

The right way to use drop shadows

All user interfaces are a collection of surfaces. You have the background, foreground, and the elements that float on top. To show users what screen elements are active, you have to use surface elevation.

Some components that need elevation are toasts, cards, and menus. When you fail to use elevation, these components can look like they are part of the background or content. As a result, users can overlook them and fail to interact with them promptly.

Your interface needs three levels of elevation: Low, Medium, and High. These elevations vary by the spread of their drop shadow.

Notice how the spread of the high elevation shadow is larger than the medium and low elevation ones. This spread mimics shadow elevation in the real world. Users prefer shadows that look natural, so make sure they’re subtle and realistic (article).

You’ll use these different elevations to signify how active an element is. The less active an element is, the lower the elevation. But the more active an element is, the higher the elevation.

Higher elevation means that the element is closer to the user and demands their attention. This concept mimics how humans interact with real-world objects. Objects within your reach are ones you’re using, while the ones further away are not in use.

Shadow Values

The drop shadow values will vary between different elevations. A low elevation surface has a core shadow only. Therefore, the y-axis and blur will be small and appear tight to the object.

A medium elevation surface has a core shadow and cast shadow. Since it’s lifted higher off the ground, the cast shadow has a larger blur and y-axis behind the object.

Lifting the surface even higher creates a larger cast shadow. Therefore, a high elevation surface has an increased blur and y-axis to create a wider spread.

You can choose how high you want your surfaces to appear by playing with the blur and y-axis. However, the values here are optimal for most use cases. The cast shadow values from medium to high elevation are three times greater.