What is a box-shadow generator?
A box-shadow generator builds the CSS box-shadow property visually. Shadows give cards, buttons, menus and modals depth so they appear to float above the page, and small changes in blur and opacity make the difference between subtle and muddy.
Use the sliders to set each value while a preview card updates, stack up to four layers for realistic depth, switch any layer to an inset shadow, and copy the finished CSS. The link stores every layer, so a shadow can be shared with your team.
How to use the CSS Box-Shadow Generator
1.Adjust the shadow
Set horizontal and vertical offset, blur, spread, colour and opacity.
2.Add layers
Stack up to four shadows, or make one inset for a pressed look.
3.Copy the CSS
The box-shadow line is ready to paste.
Example: the default two-layer shadow
A soft elevation shadow made of two layers:
- Layer 1
- 0 10px 30px -8px at 25% opacity
- Layer 2
- 0 2px 6px 0 at 12% opacity
- Colour
- #141a2b, a dark blue-grey
The negative spread on the big layer keeps the shadow under the card rather than around its sides.
Why layered shadows look better
A box-shadow is offset-x, offset-y, blur radius, spread radius and colour, with optional inset. Real shadows have a soft wide part and a sharper part close to the object, so combining a large, faint, blurred layer with a small, slightly darker one looks more natural than one heavy shadow.
Shadows tinted with a dark version of the background colour look better than pure black. Opacity is written with the modern rgb(r g b / a%) syntax that every current browser understands.
Frequently asked questions
What does spread do?
It grows or shrinks the shadow before blurring. A negative spread keeps a big blur from showing at the sides.
How do I make an inner shadow?
Tick Inset. The shadow is drawn inside the element's border instead of outside.
Do shadows slow pages down?
Rarely. Very large blurs on many animated elements can, so avoid animating box-shadow on long lists.
How do I add a shadow to a non-rectangular image?
Use filter: drop-shadow() instead; box-shadow follows the element's box.
Related tools
CSS Gradient Generator
Linear, radial and conic gradients with up to six stops.
CSS Border-Radius Generator
Rounded corners, linked or per-corner, in px or %.
CSS clamp() Generator for Fluid Sizes
Fluid font sizes and spacing that scale between two viewport widths.
JSON Formatter & Validator
Pretty-print, minify, sort and validate JSON with line-numbered errors.
JSON ↔ CSV Converter
Convert JSON arrays to CSV and CSV back to JSON.
JSON to TypeScript Interface Generator
Generate TypeScript interfaces or types from a JSON sample.