CSS box-shadow adds depth and elevation to UI elements — from subtle cards to dramatic glows. Use our free Box Shadow CSS Generator to build multi-layer shadows with live preview. Pair with Glassmorphism Generator for frosted glass cards. Part of our Complete Developer Tools Guide.
CSS box-shadow Syntax
box-shadow: offset-x offset-y blur spread color inset; — each value controls a different aspect. Offset moves the shadow, blur softens edges, spread expands/contracts size, color sets tint, inset flips shadow inside the element.
Multi-Layer Shadows
Stacking multiple comma-separated shadows creates realistic depth. Apple's design system uses 3 layers at different blur radii — a tight shadow for contact, a medium one for elevation, and a soft ambient shadow.
Inset Shadows
Add inset for inner shadows — perfect for pressed button states, input field depth, or neumorphic designs. Our generator includes an inset toggle per layer.
Colored Shadows (Glow Effects)
Use colored rgba shadows for glow effects — popular in dark mode UIs and accent buttons. Try our "Colored Glow" preset with indigo at 40% opacity.
Performance: box-shadow vs filter:drop-shadow
box-shadow is hardware-accelerated and preferred for rectangular elements. filter:drop-shadow follows non-rectangular shapes but costs more. Use box-shadow unless you need shape-aware shadows.
Tailwind CSS Shadow Utilities
Tailwind provides shadow-sm through shadow-2xl for single standard shadows. Multi-layer or colored shadows need arbitrary values: [box-shadow:...] or custom config in tailwind.config.js.
Frequently Asked Questions
What is a CSS box-shadow?
CSS box-shadow adds shadow effects to an element. It takes up to 6 values: horizontal offset, vertical offset, blur radius, spread radius, color, and an optional "inset" keyword for inner shadows. Multiple comma-separated shadows can be stacked for more realistic, layered effects.
How do I create an inset shadow in CSS?
Add the "inset" keyword before the other values: box-shadow: inset 0 2px 4px rgba(0,0,0,0.2). Inset shadows appear inside the element instead of outside, useful for creating pressed button states or depth effects on input fields.
How do multi-layer shadows work?
Multiple box-shadow values separated by commas stack on top of each other. This technique creates more realistic shadows by simulating how light in the real world produces soft, diffused shadows. Apple's design system, for example, uses 3-4 shadow layers at different blur intensities.
What is the difference between box-shadow and filter:drop-shadow?
box-shadow only applies to the element's rectangular box — it doesn't follow the element's border-radius or transparent cutouts. filter:drop-shadow follows the element's actual shape, including transparency. However, box-shadow is generally more performant and better supported. Use filter:drop-shadow for non-rectangular elements like PNG icons.