Concept & Knowledge Hub
CSS Box Shadows: Depth, Elevation & Neumorphism
The CSS box-shadow property allows front end developers to cast dynamic drop shadows from the frame of any HTML element. It is the primary technique for establishing visual hierarchy, floating cards, and modern UI elevation.
Writing complex layered shadows by hand requires tedious trial and error. This visual generator lets you manipulate light sources, blur radiuses, and alpha transparency channels, outputting the exact CSS code instantly, entirely client side.
Core Architecture & Mathematical Formula
box-shadow: [X-Offset] [Y-Offset] [Blur-Radius] [Spread-Radius] [Color] [Inset]
You can stack multiple shadows on a single element by separating them with commas, which is essential for creating hyper realistic, diffuse ambient lighting.
Best Practices & Essential Guidelines
- Layer Multiple Subtle Shadows: A single harsh black shadow looks cheap and dated. Professional UI design uses a tight, dark shadow for immediate depth, combined with a large, highly transparent shadow for ambient light dispersion.
- Use RGBA for Transparency: Never use solid hex colors for shadows. Always use RGBA or HSLA with a very low alpha channel (e.g., 0.05 to 0.15) so the shadow realistically blends with whatever background color sits behind it.
- Match Real World Lighting: In the real world, light usually comes from above. Therefore, your Y Offset should almost always be positive (pushing the shadow down), while the X Offset remains close to zero.
Frequently Asked Questions (FAQ)
What does the Spread Radius do?
The spread radius expands or contracts the physical footprint of the shadow before the blur is applied. A positive spread makes the shadow larger than the element, while a negative spread pulls it inward (great for floating elements).
How do I create an inner shadow?
Append the keyword `inset` to the end of the CSS rule. This reverses the shadow, making it render inside the bounding box, creating an indented, debossed, or 'pressed in' neumorphic effect.
Do box shadows cause performance issues?
Yes. Animating box shadows (like a hover effect) forces the browser to constantly repaint the pixels, which can cause lag on cheap mobile devices. It is often more performant to animate the `opacity` of a pseudo element containing the shadow.