CSS Box Shadow: Examples, Tricks, and Best Practices

Box Shadow Syntax

The CSS box-shadow property adds shadow effects around an element’s frame. The syntax is: box-shadow: offset-x offset-y blur-radius spread-radius color. Offset-x moves the shadow horizontally, offset-y moves it vertically, blur-radius softens the edges, spread-radius expands or contracts the shadow, and color sets its color.

A basic shadow might use values like 0 for horizontal offset, 4px for vertical offset, 8px for blur, 0 for spread, with a semi-transparent black color. This creates a subtle downward shadow that lifts the element off the page.

Common Shadow Patterns

Subtle elevation: A small shadow with moderate blur creates a gentle lift effect. Values like 0 2px 4px with a low-opacity black produce cards and buttons that feel slightly raised from the background. This is the most common shadow in modern UI design.

Medium elevation: Increasing the offset and blur produces a more pronounced floating effect. Values around 0 4px 12px work well for dropdown menus, modals, and focused input fields. The shadow is noticeable but not heavy.

Heavy elevation: Large offsets and wide blur create dramatic depth. Values like 0 12px 24px suit hero cards, featured content blocks, and overlay panels. Use sparingly, as too many heavy shadows make a page feel cluttered.

Hard shadow: Setting blur to 0 creates a sharp-edged shadow that evokes retro and brutalist design styles. A 4px 4px shadow with no blur looks like a solid offset copy of the element, popular in certain modern design trends.

Layered Shadows for Realism

Real-world shadows are not uniform. Material Design and other modern design systems use multiple shadow layers to create realistic depth. A single element might combine a subtle close shadow (simulating ambient occlusion) with a larger, lighter shadow (simulating the main light source).

Using two or three comma-separated shadow values on a single element produces far more realistic results than any single shadow. A card might have a 0 1px 3px tight shadow for close contact and a 0 4px 12px wider shadow for ambient depth. The combined effect looks natural and dimensional.

Inset Shadows

Adding the inset keyword creates inner shadows that appear inside the element rather than outside. Inset shadows are useful for pressed button states, input field depth effects, and creating the illusion of recessed surfaces.

A subtle inset shadow on a text input field gives it a slightly recessed appearance that communicates interactivity. Combining inset shadows with regular shadows on a button creates a toggle effect: the normal state uses an outer shadow (raised), and the pressed state uses an inset shadow (pressed in).

Performance Considerations

Box shadows trigger paint operations in the browser’s rendering pipeline. Complex shadows (large blur radius, multiple layers) on many elements can impact scrolling performance, particularly on lower-powered devices.

For elements that animate (hover effects, scroll-based transitions), consider using filter: drop-shadow() as an alternative, which can be GPU-accelerated. Alternatively, pre-render complex shadows as background images for static elements.

Avoid applying heavy shadows to elements that repaint frequently. If a card list has 100 items each with complex shadows, the cumulative rendering cost can cause jank. Simpler shadows (smaller blur, fewer layers) maintain smooth performance.

Modern Trends

Current design trends favor subtle shadows over dramatic ones. The soft, diffused shadows of neumorphism (though its popularity has waned) and the gentle elevations of Material Design 3 both use carefully tuned shadow values. Glassmorphism combines backdrop blur with subtle shadows for a frosted-glass effect.

Use the CSS shadow generator on CalcHub to create and customize box shadows visually, or explore our color tools for shadow color selection.

Design perfect box shadows with CalcHub’s CSS tools.