CSS Box Shadow Generator
Design layered CSS box shadows visually with live preview and copy-ready code.
How to use the CSS Box Shadow Generator
Step 1 — Shape the shadow
- Drag X, Y, blur, and spread; pick a colour and opacity.
Step 2 — Layer it
- Add more layers for realistic, multi-step depth.
Step 3 — Try inset
- Toggle inset for a recessed, pressed-in look.
Step 4 — Copy the CSS
- Grab the box-shadow declaration and paste it into your styles.
Frequently asked questions
X and Y move the shadow horizontally and vertically, blur softens its edge, spread grows or shrinks it, and the colour with its opacity sets how dark it is. Together they place and shape the shadow.
CSS lets you stack multiple shadows on one element, separated by commas. Layering a tight, faint shadow with a wider, softer one produces the realistic depth you see in good UI design, which a single shadow rarely achieves.
Inset draws the shadow inside the element instead of outside, making it look pressed in or recessed — useful for input fields, wells, and pressed-button states.
Shadows look best as a semi-transparent colour so the background shows through. Keeping opacity on its own slider lets you fine-tune softness without editing the colour value by hand.
Yes. It outputs a standard box-shadow declaration that every browser supports; paste it directly onto your element.
About the CSS Box Shadow Generator
This tool lets you craft a CSS box shadow visually, watching a sample element update as you adjust each value, then copy the exact declaration. It supports layered shadows and inset shadows, so you can build everything from a subtle card lift to a deeply recessed input.
How a box shadow is built
A box shadow is defined by a small set of values, and understanding each one makes the controls intuitive. The horizontal and vertical offsets push the shadow left/right and up/down, simulating a light source from a particular direction. Blur controls how soft the edge is — zero gives a hard-edged shadow, larger values diffuse it. Spread expands or contracts the shadow before the blur is applied, which is how you make a shadow tighter than the element or bleed beyond it. Finally the colour, almost always set with some transparency, determines how dark and how present the shadow feels against the background.
Why layering matters
The single biggest difference between a flat, amateurish shadow and a polished one is layering. Real objects do not cast a single uniform shadow; the contact area is darker and tighter while the ambient shadow is softer and wider. CSS lets you reproduce this by stacking several shadows on the same element, separated by commas, and this tool builds that list for you. A common recipe is a small, slightly opaque shadow close to the element plus a larger, fainter one further out — the result reads as genuine depth. You can add as many layers as you like and reorder your thinking by toggling each one inset, which draws the shadow inside the box for pressed or recessed effects.
Using the output
The generated code is a standard box-shadow property that works in every current browser, ready to paste onto any element. The checkerboard behind the preview makes the shadow transparency visible so you can judge it accurately. Everything is generated locally in your browser. To design background blends, see the CSS Gradient Generator; to keep text over your shadowed cards readable, check the Color Contrast Checker.