CSS Box Shadow Generator
Build a layered box-shadow with a live preview, then copy the ready-to-paste CSS.
How to Build a Box Shadow
- Adjust the offset, blur, spread, color, and opacity sliders — the preview updates live.
- Toggle "Inset" for a recessed, pressed-in look instead of a drop shadow.
- Click "+ Add Another Shadow" to layer a second or third shadow on top.
- Click "Copy CSS" to grab the finished code.
Frequently Asked Questions
What do the X and Y offset values control?
X offset shifts the shadow left (negative) or right (positive); Y offset shifts it up (negative) or down (positive). Together they control the direction the shadow appears to be cast in, simulating a light source from the opposite direction.
What's the difference between blur and spread?
Blur softens the shadow's edges, spreading it into a gradient fade — higher blur looks softer and more diffuse. Spread instead grows or shrinks the shadow's actual size uniformly in every direction before any blur is applied, similar to how spread works on a light source's radius.
What does the "inset" option do?
A normal box-shadow appears outside the element's edges, like a drop shadow. Inset flips it to render inside the element's boundary instead, creating a pressed-in or recessed look rather than a raised one.
Can I combine multiple shadows on one element?
Yes — CSS box-shadow accepts a comma-separated list of shadow definitions, all rendered on the same element at once. This is commonly used to combine a soft, large ambient shadow with a tighter, sharper one for a more realistic layered depth effect.