Chord - CSS Shadow System

Understanding a CSS Shadow System

A well-designed CSS shadow system is one of the most effective ways to communicate depth and hierarchy in a user interface. Rather than applying ad-hoc box-shadow values throughout a project, a structured elevation scale ensures visual consistency across every component, from subtle card borders to dramatic modal overlays.

Why Elevation Levels Matter

In Material Design and similar frameworks, elevation is expressed as a set of discrete levels. Each level corresponds to a specific distance from the surface, and shadows grow larger, softer, and more offset as the elevation increases. This approach mirrors how light behaves in the physical world: objects further from a surface cast wider, more diffuse shadows.

A five-level scale - flat, raised, floating, overlay, and modal - covers the vast majority of interface needs. Flat elements sit flush with the page. Raised elements, like cards and buttons, communicate interactivity. Floating elements such as dropdowns appear above surrounding content. Overlays and modals demand full user attention by appearing to hover well above the rest of the page.

Choosing Shadow Styles

The style of your shadows shapes the overall aesthetic of your interface. Natural shadows closely mimic real-world light with moderate blur and slight vertical offset. Sharp shadows use less blur for a crisper, more graphic look. Diffused shadows spread light over a wider area for a softer, more modern feel. Layered shadows stack multiple shadow values at different sizes, producing a richer and more realistic depth perception that many designers prefer for premium interfaces.

Tuning Color and Opacity

Shadow color is often overlooked. Pure black shadows can appear harsh, especially against warm or tinted backgrounds. Tinting your shadows with a hue that complements your design palette - such as a warm brown or a desaturated blue - creates more natural results. Opacity should be kept subtle: values between 8% and 20% work well in most cases. Going higher can make the interface feel heavy.

Exporting and Using Shadow Tokens

Once you have settled on an elevation scale, exporting it as CSS custom properties (or as Tailwind or SCSS variables) turns your decisions into reusable design tokens. This means every developer on a team applies the same shadows without guessing. For a deeper look at the box-shadow property and its syntax, see the MDN box-shadow reference.

Chord generates all five levels for you in real time. Adjust color, opacity, spread, and style, then copy the output directly into your codebase. Combined with consistent spacing from a tool like Tempo and palette colors from Harmony, a CSS shadow system built with Chord keeps your design language unified and easy to maintain.