Box shadows are one of the most important tools in a US UI designer's toolkit. They create depth, establish visual hierarchy and make flat interfaces feel tactile and real. From Material Design to modern SaaS dashboards, shadows are the primary technique for separating elements from their background without using heavy borders. In this guide, we cover everything American UI designers need to know about CSS box shadows.
The Purpose of Shadows in UI Design
In the physical world, shadows tell us about depth and elevation. An object close to a surface casts a tight, dark shadow. An object far from a surface casts a soft, diffuse shadow. Our brains use these shadow cues to understand spatial relationships.
In UI design, shadows serve the same purpose. A card with a shadow appears to float above the page, creating a sense of depth and separation. A modal dialog with a larger shadow appears to be at a higher elevation than the page content, signaling that it is the current focus. A dropdown menu with a shadow appears to be a separate layer above the page.
Without shadows, flat interfaces can feel ambiguous — it is unclear which elements are interactive, which are content and which are navigation. Shadows provide the visual cues that help users understand the interface hierarchy.
CSS Box Shadow Syntax
The CSS box-shadow property accepts up to six values:
box-shadow: offset-x offset-y blur-radius spread-radius color inset;
offset-x and offset-y: The horizontal and vertical offset of the shadow. Positive values move the shadow right and down; negative values move it left and up.
blur-radius: How blurry the shadow is. 0 creates a sharp shadow; higher values create softer, more diffuse shadows. This is the most important value for realistic shadows.
spread-radius: How much the shadow grows or shrinks from the element's edges. Positive values make the shadow larger; negative values make it smaller. Usually left at 0.
color: The shadow color. Use rgba or hsla to control opacity — a fully opaque black shadow is usually too harsh. rgba(0,0,0,0.1) is a common starting point.
inset (optional): If present, the shadow appears inside the element instead of outside. Useful for inset effects on buttons and input fields.
Types of Shadows
Drop shadows: The most common type. The shadow appears below and slightly to the side of the element, simulating a light source from above. Example:box-shadow: 0 4px 6px rgba(0,0,0,0.1).
Floating shadows: Larger, softer shadows that make an element appear to float at a higher elevation. Used for modals, popovers and floating action buttons. Example:box-shadow: 0 10px 30px rgba(0,0,0,0.15).
Inset shadows: Shadows that appear inside the element, creating a recessed effect. Used for input fields, pressed buttons and inset panels. Example:box-shadow: inset 0 2px 4px rgba(0,0,0,0.1).
Text shadows: Shadows applied to text using the text-shadow property. Use the Text Shadow Generator for text-specific shadow effects.
Layered Shadows for Realistic Depth
The most realistic shadows use multiple layers. Instead of one shadow, you stack 2-3 shadows with different blur radii and opacities. This mimics how light creates both a tight umbra (the dark, sharp part of a shadow) and a soft penumbra (the lighter, diffuse part).
A popular layered shadow pattern:
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);
This creates three layers: a tight shadow close to the element, a medium shadow for mid-range depth and a soft shadow for overall elevation. The result is a shadow that looks more natural than any single shadow could achieve.
For higher elevation (modals, popovers), increase the blur and offset of each layer:
box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 10px 15px rgba(0,0,0,0.1), 0 20px 25px rgba(0,0,0,0.1);
Shadows in US Design Systems
Most US design systems define a shadow scale — a set of predefined shadow values that correspond to different elevation levels. Material Design defines 5 elevation levels (0-24dp), each with a specific shadow. Tailwind CSS defines 6 shadow levels (sm, DEFAULT, md, lg, xl, 2xl). These scales ensure consistency across an application.
For US design teams, defining a shadow scale is a best practice. Instead of using arbitrary shadow values throughout your application, define 3-5 elevation levels (e.g., card, modal, popover, tooltip) and use the same shadow for each level consistently. This creates a cohesive visual language where users learn that a certain shadow depth means a certain type of element.
Using a Box Shadow Generator
Writing box shadow CSS by hand requires visualizing the result, which is difficult for complex shadows. The Box Shadow Generator from Automarkly lets you design shadows visually:
Adjust offset, blur and spread with sliders or input fields.
Choose shadow color with a color picker, including opacity control.
Add multiple shadow layers for realistic depth.
Preview the result in real time.
Copy the generated CSS code directly into your stylesheet.
For related design tools, the Border Radius Generator creates rounded corner CSS, and the Text Shadow Generator handles text-specific shadows.
Shadow Design Best Practices
Use consistent shadow direction. All shadows in your application should imply the same light source (typically from above). If some shadows go down-right and others go up-left, the design feels inconsistent.
Use subtle shadows. The most effective shadows are subtle. A shadow that is too dark or too large looks heavy and dated. Start with rgba(0,0,0,0.1) and adjust slightly if needed.
Match shadow to elevation. Higher elements (modals, popovers) should have larger, softer shadows. Lower elements (cards) should have smaller, tighter shadows. This creates a consistent depth language.
Consider dark mode. Shadows that look good on white backgrounds may be invisible on dark backgrounds. In dark mode, use lighter shadow colors (rgba(0,0,0,0.3) or higher) or use borders for separation instead.
Avoid animating box-shadow. Animating the box-shadow property triggers repaints that can hurt performance. For hover effects, animate opacity or transform instead, or use the filter: drop-shadow() property which is GPU-accelerated.
For US UI designers, box shadows are the primary tool for creating depth and hierarchy. Use the Box Shadow Generator to design shadows visually, and follow these best practices for a polished, professional interface.