What is box-shadow?
Create multi-layer CSS box-shadow values with live preview, inset toggles, and precise controls.
box-shadow is a CSS property that draws one or more shadows behind or inside an element.
Each shadow layer combines horizontal and vertical offsets, a blur radius, an optional spread radius, and a color with alpha. Add inset to turn the layer into an inner shadow.
Multiple layers are comma-separated, which lets you stack subtle shadows for depth, glow, or crisp edges without changing your layout.
- Use small offsets with larger blur values for soft elevation.
- Use higher opacity with lower blur values for sharper edges.
- Combine outer and inner shadows when you need more perceived depth.
- Keep the layer count modest when performance matters.