CSS box shadows are one of the most nuanced tools in front-end design. A single shadow value can look naive; layered shadows at different sizes and opacities can create convincingly three-dimensional elevation effects that make UI elements feel naturally separated from their backgrounds.
The Box-Shadow Property
The full syntax for box-shadow is: horizontal-offset vertical-offset blur-radius spread-radius color. The inset keyword makes the shadow appear inside the element.
Positive horizontal offset moves the shadow right. Negative offset moves it left. Positive vertical offset moves it down (the most natural direction for light from above). Negative offset moves it up.
Blur radius is always a positive value. Zero gives a hard edge (like a sharp cast shadow). High values produce a soft, diffuse shadow.
Spread radius expands or contracts the shadow beyond the element's boundaries. Positive values make the shadow larger. Negative values shrink it, useful for creating shadows that look recessed under the element's edges.
Elevation Systems
Material Design popularized the concept of elevation levels: each interactive layer in a UI sits at a different elevation, communicated through shadow intensity. Lower elevations have smaller, tighter shadows. Higher elevations have larger, more diffuse shadows.
A three-shadow system is commonly used: a large ambient shadow (big spread, large blur, very low opacity), a medium directional shadow (moderate size, medium blur, low opacity), and a small contact shadow (tiny offset and blur, high opacity) at the base of the element.
Neumorphic Shadows
Neumorphism uses two shadows: a light shadow on the top-left (simulating light from the top-left) and a dark shadow on the bottom-right. Both shadows are inset or both are outset depending on whether the element should appear extruded or indented. The element and the background must share the same color for the effect to work.
Neumorphic designs are visually interesting but can have accessibility issues: the low contrast between the element and background can make it hard for users with visual impairments to distinguish interactive elements.
Using the DevHexLab Box Shadow Generator
Open the tool at /tools/css/box-shadow-generator. Use the sliders to set each parameter. Add multiple layers for sophisticated effects. Preview in real time and copy the CSS when satisfied.
Frequently Asked Questions
Can box-shadow be used for borders?
Yes. A zero-offset, zero-blur box-shadow with a spread value creates a border that does not affect layout (unlike the border property, which adds to the element's size if box-sizing is content-box).
Does box-shadow affect performance?
Complex multi-layer shadows on elements that animate can affect rendering performance on lower-powered devices. Use transform animations rather than layout-triggering properties when animating shadowed elements.
Build the shadow visually, iterate quickly, and copy the CSS.