How to Use Shadows in UI Design

Elevation and visual hierarchy

Elevation is one of the clearest uses for shadows. Higher surfaces should usually have larger shadows, while lower surfaces should use more subtle ones. When a surface changes elevation, its shadow should change accordingly.

Depth also affects hierarchy. A stronger sense of elevation can help show which elements sit above others, while small, low-opacity shadows can work better for flat interface elements. This is why shadow depth needs to be handled consistently across a design instead of being adjusted randomly from one component to another.

Separating surfaces from the background

Shadows can also separate objects from their surroundings. A drop shadow can make an element appear lifted from the background, while an inner shadow can make edges appear sunken or carved into the surface. Both effects change how a user reads the relationship between an object and the space around it.

Different shadow types and their uses

Not every shadow has the same role. Drop shadows and inner shadows behave differently, and soft, strong, and inner shadows can be used for different situations. A soft shadow often depends on lower opacity and higher blur, especially on lighter surfaces. A stronger shadow creates a more pronounced separation, while an inner shadow changes how the edge of a surface is perceived.

Keeping light direction consistent

Light direction needs to feel predictable. Shadows should appear to come from a consistent direction, such as top-left, top, or front. A design can also define elevation levels or reusable shadow tokens so that shadow values stay consistent across components.

Platform differences

A UI shadow system may also need to account for platform differences. On Android and iOS, shadows can be tied to the z-axis position. On the web, they can be represented through y-axis manipulation. The important point is that the chosen model should be applied consistently within the interface.

Color and surface context

Color and surface context should guide shadow decisions. Large, heavy, inverse, or colorful shadows can easily become difficult to control. At the same time, shadows do not always need to default to black or gray. Subtle color variations can be matched to the surface, and shadows can be adapted according to the background.

Avoiding overuse

Shadows should be used with restraint. Too many shadows can make an interface feel cluttered or overwhelming, and inconsistent shadows can make the interface harder to navigate. Common mistakes include:

A shadow works best when it has a clear role, such as showing elevation, separating a surface, or supporting an interaction state.

Shadows in interaction states

Interaction states can also be shown through shadows. A shadow may change when an element is hovered over or clicked. Shadows can also indicate focus, selection, or interactivity. These changes should still fit the broader shadow system so that interactive feedback does not feel disconnected from the rest of the interface.

Shadows and component recognition

Shadows and outlines are only part of component recognition. They can help make an element easier to distinguish, but they should not be treated as the only cue. Recognition can also depend on other attributes, including font characteristics, elevation, color, and layout.

Performance considerations

Performance is another consideration. CSS shadows can slow down rendering, so they should be used carefully rather than added everywhere by default. The available guidance points to performance as a concern, but it does not provide specific benchmarks or device-level thresholds.

Designing with reusable shadow values

Design tools usually expose shadow settings through values such as X and Y axes, blur, and spread. Reusable shadow components or tokens can help keep these values consistent. This makes shadows easier to manage as part of a design system instead of treating each shadow as a separate visual adjustment.

Final thoughts

A practical shadow system is restrained, consistent, and aware of context. Shadows can show depth, hierarchy, surface separation, and interaction, but they can also create visual noise when they are too heavy, too inconsistent, or disconnected from the surface they belong to.