The Full box-shadow Syntax
The CSS box-shadow property accepts: offset-x offset-y blur-radius spread-radius color inset. Understanding each parameter is essential for controlled shadow depth. Generate values visually with our CSS Box Shadow Generator.
- offset-x / offset-y: Horizontal and vertical displacement. Setting both to 0 produces a symmetric glow effect.
- blur-radius: A value of 0 produces a hard shadow. Higher values produce softer, more diffuse shadows.
- spread-radius: Expands or contracts the shadow uniformly before blurring. Positive spread with zero offset creates a glowing halo.
- color: Semi-transparent RGBA colors almost always look more natural than opaque black shadows.
- inset: Optional keyword that flips the shadow inside the element, creating a pressed or recessed appearance.
Layering Multiple Shadows for Realistic Depth
The most sophisticated shadows use multiple layers. A realistic card shadow: box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.08); The first layer adds crispness; the second adds depth. This two-layer technique is the basis for Google’s Material Design elevation system.
Neumorphism: When Shadows Define the Interface
Neumorphism uses two opposing shadows — one light, one dark — to simulate an embossed element. It requires a mid-tone background and produces stunning effects, but presents severe accessibility problems: the low contrast nearly fails WCAG requirements for users with low-contrast vision. Generate neumorphic CSS with our Neumorphism CSS Generator.