CSS box-shadow Basics
box-shadow is a CSS property that adds a shadow to an HTML element. Values are specified in the order: horizontal offset, vertical offset, blur radius, spread radius, and color. By stacking multiple shadows separated by commas, you can build effects like neumorphism.
Neumorphism and box-shadow Examples
The popular neumorphism style is achieved by using box-shadow in two opposing directions: a light shadow on the bright side and a dark shadow on the opposite side, creating a sense that UI elements rise from or sink into the surface. Try it with the layer feature in this tool.
Practical Limitations
CSS box-shadow only applies to the rectangular box model; for text you need text-shadow. box-shadow also does not affect the element's layout size, so the shadow may extend out and overlap neighboring elements. Be careful with overflow: parents with overflow: hidden will clip the shadow. From a performance standpoint, applying a box-shadow with a large blur radius to many elements increases GPU compositing cost and can cause jank during scrolling.
Trade-offs
Multi-layer box-shadow effects like neumorphism look attractive but pose accessibility challenges. They depend on subtle contrast differences between background and shadow, so users with color vision differences or those on low-contrast displays may struggle to perceive UI boundaries. Unlike CSS filter drop-shadow, box-shadow cannot generate a shadow that follows the alpha shape of a PNG. It composes well with border-radius, but does not handle complex shapes clipped via clip-path.
Common Q&A
Q: My box-shadow has no effect. Shadows may not render correctly on display: inline elements. Use display: inline-block or block. Q: The shadow looks choppy on mobile. Keep the blur-radius modest (10 px or less) and add will-change: box-shadow to encourage GPU compositing. Q: I want inset and a regular shadow at once. box-shadow accepts multiple comma-separated values, so inset and outer shadows can be applied together.
CSS Shadow Trends
When CSS3 standardized box-shadow around 2011, skeuomorphic designs heavily used dramatic shadows. The 2014 launch of Material Design organized shadow usage with the concept of elevation, and around 2020 neumorphism became a trend. Since 2024, semi-transparent looks combined with glassmorphism have become mainstream. Looking ahead, ray-tracing-based shadows in CSS are being discussed, promising more natural lighting.