CSS Box Shadow Generator
Generate CSS box-shadow with visual preview. Adjustable offset, blur, spread, color, inset for elevation effects.
CSS Code
What is CSS box-shadow?
CSS box-shadow adds drop shadows or inset shadows to elements. Essential for: card-based UIs (Material Design), button elevation, hover effects, focus states, modal/popover depth, indented inputs (inset). Five values define a shadow: horizontal offset, vertical offset, blur radius, spread radius, color. The result conveys depth and hierarchy in flat 2D interfaces.
How to use
- Set horizontal offset — Positive = right, negative = left
- Set vertical offset — Positive = down, negative = up
- Adjust blur — 0 = sharp, higher = softer
- Adjust spread — How far shadow extends beyond box
- Pick color + opacity — Typically black with 10-20% opacity for realism
Formula
Syntax: box-shadow: [inset] h-offset v-offset blur spread color;
Multiple shadows: box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05);
Tips
- Subtle elevation:
0 1px 3px rgba(0,0,0,0.1) - Medium card:
0 4px 12px rgba(0,0,0,0.1) - Floating button:
0 8px 24px rgba(0,0,0,0.15) - Inset for indented inputs:
inset 0 2px 4px rgba(0,0,0,0.1) - Multiple layered shadows look more realistic than single
FAQs
Why use low opacity for shadows?
Real shadows are subtle. 10-15% opacity looks natural. 50%+ opacity looks like dark border, not shadow.
What is 'spread'?
How far the shadow extends beyond the element edges before blur. Negative spread = smaller than element. Useful for glow effects (positive spread + blur).
Inset vs outset?
Default: outset (shadow outside element, gives elevation effect). Inset: shadow inside element, gives indented/recessed look. Useful for input fields, pressed buttons.
Browser support?
Universal — even IE9+. Use freely in any modern project.