Shadows are how flat screens fake depth: a subtle box-shadow lifts a card off the page, signals that a button is pressable, and separates a modal from the content behind it. The CSS syntax — offset-x, offset-y, blur, spread, color — is simple, but the difference between elegant and amateurish lives in values you can only judge visually.
This generator lets you tune every parameter with sliders against a live preview, including inset shadows and layered multi-shadow setups, then copies production-ready CSS.
How to Use This Tool
- Adjust horizontal and vertical offset to set the light direction.
- Increase blur for softness; use spread to grow or shrink the shadow.
- Pick a shadow color with transparency (low-opacity black usually looks best).
- Copy the box-shadow rule when the preview looks right.
Frequently Asked Questions
What makes a shadow look natural?
Real shadows are soft, slightly offset downward (light comes from above), and far more transparent than people expect — rgba(0,0,0,0.1) to 0.2. Layering two or three shadows of increasing blur and decreasing opacity mimics real light beautifully.
What does the inset keyword do?
It flips the shadow inside the element, making the surface look pressed or carved instead of raised. Inset shadows create the classic 'pressed button' state and subtle input-field depth.
Do box-shadows hurt performance?
Static shadows are cheap. Animating them is not — the browser repaints every frame. For smooth hover transitions, animate opacity on a pseudo-element carrying the shadow, or transition transform instead.