In the flat design era of the early 2010s, shadows were considered outdated — a relic of skeuomorphic design that had no place in the clean, minimalist interfaces of modern web applications. But design trends are cyclical, and depth has made a comeback. Today's best interfaces use subtle, layered shadows to create visual hierarchy, indicate interactivity, and guide user attention. From the card-based layouts of US SaaS dashboards to the elegant depth effects of European e-commerce sites, box shadows are an essential tool in the modern web designer's toolkit. In this guide, we explore how CSS box shadows work, how to use them effectively, and how to generate them with the right tools.
What Is the CSS Box Shadow?
The CSS box-shadow property applies one or more shadow effects to an element's frame. It can create the illusion that an element is elevated above the page, floating above the background, or recessed into it. Shadows are one of the most effective ways to create visual hierarchy — elements with larger, softer shadows appear closer to the user, while elements with no shadow appear flat and at the same level as the background.
Box shadows are used extensively in modern UI design. Cards, modals, dropdown menus, tooltips, and floating action buttons all use shadows to indicate that they are separate from the main content and can be interacted with. A well-designed shadow system creates a consistent sense of depth across an application, making the interface feel more intuitive and polished.
The box-shadow property is also important for accessibility. For users with low vision or cognitive disabilities, visual hierarchy helps them understand which elements are interactive and how the interface is organized. Shadows provide a non-text cue that complements color and spacing to communicate structure — an important consideration for ADA and EAA compliance.
Box Shadow Syntax Explained
The box-shadow property accepts up to six values: horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword. The syntax is: box-shadow: h-offset v-offset blur spread color inset.
Horizontal and Vertical Offset
The horizontal offset (h-offset) moves the shadow right (positive values) or left (negative values). The vertical offset (v-offset) moves the shadow down (positive) or up (negative). A shadow with offset 0 0 is centered behind the element, creating a uniform glow effect. Offsets of 2px 4px create a shadow that appears to come from a light source in the upper left, which is the most natural and commonly used direction.
Blur Radius
The blur radius controls how soft the shadow edges are. A blur of 0 creates a sharp, hard shadow (like a solid shape behind the element). Higher blur values create softer, more diffuse shadows. Most modern designs use blur values between 4px and 24px. Very high blur values (50px and above) create atmospheric, ambient shadows that can add a subtle glow to an element.
Spread Radius
The spread radius expands or contracts the shadow. A positive spread makes the shadow larger than the element, while a negative spread makes it smaller. Spread is less commonly used than blur, but it can be useful for creating specific effects. For example, a shadow with 0 offset, 0 blur, and a small positive spread creates a solid outline around the element, which can be used as an alternative to borders.
Color
The shadow color should typically be a semi-transparent black (e.g., rgba(0, 0, 0, 0.1)) for light-mode designs. Using a fully opaque black creates harsh shadows that look unnatural. The opacity controls how intense the shadow appears — 0.05 to 0.15 is typical for subtle shadows, while 0.2 to 0.3 is used for more prominent elevation effects.
Inset
The inset keyword reverses the shadow, making it appear inside the element rather than outside. Inset shadows are used to create recessed or engraved effects, such as input fields that appear to be pressed into the surface. They can also be combined with outer shadows for complex depth effects.
Types of Shadows
Different design contexts call for different shadow styles. Understanding the main types helps you choose the right shadow for each situation.
Elevation Shadows
Elevation shadows simulate an element floating above the surface. They use a small offset (2-6px), moderate blur (8-16px), and low opacity (0.1-0.15). These are the most common shadows in modern UI design, used for cards, buttons, and interactive elements. The Material Design system from Google defines specific elevation levels with corresponding shadow values, which provides a useful reference.
Drop Shadows
Drop shadows are sharp, directional shadows that simulate a direct light source. They use small blur values (2-6px) and moderate offsets. Drop shadows are common in illustrations and playful designs but less common in professional UI design, where softer shadows are preferred.
Ambient Shadows
Ambient shadows are very soft, very large shadows that create a subtle glow around an element. They use large blur values (40-80px), zero offset, and very low opacity (0.05). Ambient shadows are used for prominent elements like modals and hero cards, where a strong sense of elevation is needed.
Layered Shadows for Realism
The most realistic shadows are created by layering multiple shadows with different properties. A common technique is to use two shadows: a tight, dark shadow close to the element (simulating the direct shadow) and a wider, lighter shadow further away (simulating the ambient shadow). This creates a more natural depth effect than a single shadow.
For example: box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07). This layered shadow creates a smooth, realistic elevation effect that looks far more natural than a single shadow. The technique is used by many design systems, including Material Design and Apple's Human Interface Guidelines.
When layering shadows, keep the color consistent (use the same color with different opacities) and increase the blur and offset exponentially for each layer. This creates a smooth gradient from sharp to soft, simulating how real light behaves.
How to Generate Box Shadows
Creating the perfect box shadow often requires experimentation. The Box Shadow Generator provides an interactive interface where you can adjust the offset, blur, spread, color, and opacity of your shadow and see the result in real time. It supports multiple shadow layers, so you can create complex, realistic depth effects. When you are happy with the result, you copy the generated CSS code directly into your stylesheet.
For text-specific shadow effects, the Text Shadow Generator provides similar functionality for the text-shadow property. Text shadows can add depth to headings, create embossed or letterpress effects, and improve text legibility on busy backgrounds.
Both tools run entirely in your browser, so you can experiment freely without any data leaving your device. This is particularly useful when working on design prototypes or experimenting with different shadow styles before committing to a final design.
Shadows in Dark Mode
Shadows behave differently in dark mode. On a dark background, dark shadows are nearly invisible, which means the visual hierarchy that shadows provide in light mode is lost. To maintain depth in dark mode, designers use several alternative techniques.
First, use lighter background colors for elevated surfaces. Instead of shadows, a card in dark mode might have a slightly lighter background color (e.g., #1e1e3a on a #0f0f1a background) to create visual separation. This is the approach used by most modern dark mode design systems, including Material Design's dark theme.
Second, use subtle borders. A 1px border with a low-opacity color can define the edges of an element in dark mode, providing the visual separation that shadows provide in light mode. Third, if you do use shadows in dark mode, increase the opacity and use a darker color (e.g., rgba(0, 0, 0, 0.5)) to ensure the shadow is visible against the dark background.
For US and EU applications that must support both light and dark modes, define shadow values as CSS custom properties and swap them based on the theme. This ensures that shadows are appropriate for each mode and maintain the intended visual hierarchy.
Best Practices and Performance
First, be consistent. Define a small set of shadow levels (e.g., low, medium, high) and use them consistently across your application. This creates a predictable visual language that users can intuitively understand. Material Design's elevation system is a good reference — it defines five elevation levels with corresponding shadow values.
Second, use shadows purposefully. Every shadow should communicate something — elevation, interactivity, or hierarchy. Avoid adding shadows "for decoration" without a clear purpose. Too many shadows create visual noise and dilute the hierarchy they are meant to establish.
Third, be mindful of performance. While box shadows are generally performant, large blurred shadows can cause repaints during scrolling, especially on mobile devices. For elements that scroll or animate, use the will-change property to hint to the browser that the element will change, allowing it to optimize compositing. Avoid animating box-shadow properties directly — animate opacity or transform instead, which are handled by the compositor and do not trigger repaints.
Fourth, consider accessibility. Shadows should not be the only visual cue for interactivity — always combine them with color, spacing, and text cues. For users with low vision or who have disabled custom styles, shadows may not be visible, so the interface must remain usable without them. Test your interface with shadows disabled to ensure it remains functional and accessible.
Finally, use the right tools. The Box Shadow Generator lets you experiment with shadow values visually, saving time and producing better results than trial and error in code. Combined with the Border Radius Generator and Text Shadow Generator, you have a complete toolkit for creating depth and visual interest in your designs — all running entirely in your browser.