Box Shadow Generator
Design CSS box shadows visually with sliders for offset, blur, spread and opacity. Stack multiple layers, preview live and copy the CSS.
About the Box Shadow Generator
This box shadow generator lets you design CSS shadows visually instead of guessing at numbers. Drag sliders for horizontal and vertical offset, blur radius, spread and opacity, pick the shadow color, and toggle inset for inner shadows — the preview card updates instantly with every change.
Real-world shadows are rarely a single layer: the soft, realistic elevation you see in polished interfaces comes from stacking two or three shadows of different sizes and opacities. This tool supports up to five layers — add, select and remove them freely — and generates the combined comma-separated box-shadow value automatically.
Copy the finished CSS with one click and paste it straight into your stylesheet. Everything runs locally, so it's also a handy playground for learning how each parameter shapes the result.
How to Use the Box Shadow Generator
- 1Adjust the offset, blur, spread and opacity sliders.
- 2Pick a shadow color and toggle inset if you want an inner shadow.
- 3Add extra layers to build soft, realistic depth.
- 4Watch the live preview, then copy the generated CSS.
Frequently Asked Questions
What do the box-shadow values mean in CSS?
The syntax is box-shadow: offset-x offset-y blur spread color. Offset-x moves the shadow right (negative = left), offset-y moves it down (negative = up), blur softens the edge (0 = razor sharp), and spread grows or shrinks the shadow before blurring. An optional inset keyword flips the shadow inside the element.
How do I make a shadow look soft and realistic?
Use low opacity (10–25%), a blur noticeably larger than the offset, and ideally two stacked layers: a tight, slightly darker shadow for contact (e.g. 0 1px 3px at 12%) plus a large, faint one for ambient depth (e.g. 0 8px 24px at 8%). Single dark, hard shadows are the most common giveaway of rushed styling.
Can I apply multiple box shadows to one element?
Yes — CSS accepts a comma-separated list, and the first shadow in the list renders on top. This generator builds that list for you as you add layers. Multiple layers are how design systems like Material Design produce their elevation levels, combining a key shadow and an ambient shadow per level.
What does the inset keyword do?
inset draws the shadow inside the element's border box instead of behind it, making the element look pressed-in or carved out rather than raised. It's used for input fields with inner depth, pressed button states and subtle top highlights. You can freely mix inset and normal layers in one declaration.
Do box shadows hurt page performance?
Static shadows are cheap — browsers rasterize them once. The cost appears when you animate box-shadow directly, forcing repaints every frame. For smooth hover transitions, animate opacity on a pseudo-element that carries the shadow, or keep transitions short. A handful of layered shadows on a page is never a problem.