CSS Box Shadow Generator
What is CSS Box Shadow Generator
A CSS box shadow generator lets you design a box-shadow visually and copy the exact CSS. Set the horizontal and vertical offset, the blur radius, the spread and the shadow color with its opacity, and watch the preview update as you drag each slider. You can stack several shadows on one element and switch any layer to inset, so the output box always holds a ready to paste box-shadow declaration.
How to use
- Drag the offset sliders to move the shadow horizontally and vertically.
- Set the blur radius for a soft edge and the spread to grow or shrink the shadow.
- Pick the shadow color, adjust its opacity, and toggle inset for an inner shadow.
- Add more layers if you need them, then copy the generated CSS from the output box.
When to use it
Need a soft card shadow that looks modern instead of harsh? Set the offset to 0px and 10px, 20px blur, no spread and a black color at 25% opacity, then copy box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25); straight into your stylesheet. Just as handy for button hover states, layered depth, or an inset shadow that makes an input field look pressed in.
Frequently asked questions
What do the box-shadow values mean?
In order they are the horizontal offset, the vertical offset, the blur radius, the spread and the color. Positive offsets push the shadow right and down, blur softens the edge, and spread grows or shrinks the whole shadow before it blurs.
What does the spread value do?
Spread changes the size of the shadow before any blur is applied. A positive spread makes the shadow larger than the element, and a negative spread pulls it in, which is useful for tight shadows that peek out on one side.
Can I stack more than one shadow?
Yes. Add as many layers as you like and each becomes a comma separated shadow in the same box-shadow rule. Stacking a soft wide shadow under a tighter close one is a common way to get realistic depth.
What is an inset shadow?
An inset shadow is drawn inside the element instead of behind it, so the box looks pressed in or recessed. Toggle inset on any layer to switch it, which works well for input fields, wells and pressed buttons.
Can I share this tool with my inputs pre-filled?
Yes. The URL updates automatically as you adjust the sliders. Copy it from the address bar or use the Share button, and anyone who opens the link will see your exact shadow ready to go.
Related tools
Aspect Ratio Calculator
Calculate aspect ratios, find a missing width or height, and resize images or video while keeping the same proportions. Free and instant.
Barcode Generator
Generate EAN-13 or Code 128 barcodes online. Enter your number or text, download as SVG or PNG. Free, no signup needed.
Base64 Decoder
Decode Base64 strings to plain text instantly in your browser. Supports full Unicode output including emojis. Free online Base64 decoder.