Box Shadow Generator
Compose layered shadows with live preview — soft elevation, sharp offsets, inner shadows and ready-made presets.
How the Box Shadow Generator Works
Design layered CSS shadows with per-layer controls and live preview, then copy production-ready CSS.
Layered Shadows
Real-world elevation is rarely one shadow. Stack up to six layers — a tight contact shadow plus wider ambient ones — for depth that looks natural instead of muddy.
Full Control
Each layer has X/Y offset, blur, spread, color and opacity, plus an inset toggle for inner shadows. Everything updates in the live preview as you drag.
Light & Dark Preview
Shadows read differently on dark surfaces. Flip the preview background to check both themes before shipping.
Presets to Start
Soft, Layered, Sharp, Float and Inner presets give you a solid starting point — tweak from there and copy the final CSS in one click.
Frequently Asked Questions
offset-x offset-y blur spread. Offsets move the shadow, blur softens its edge, and spread grows or shrinks it before blurring. A color (ideally with alpha) completes the value.
A single big blur looks flat and grey. Combining a small sharp shadow (contact), a medium one (key light) and a large soft one (ambient) mimics how light actually works and keeps edges crisp.
inset draws the shadow inside the element — used for pressed button states, input wells, and the dark half of neumorphic surfaces.
Animating box-shadow repaints every frame. For smooth hover elevation, animate opacity of a pseudo-element that already has the target shadow instead.