How to use Box Shadow Generator
- Set the horizontal and vertical offsets, then the blur and spread radii.
- Pick the shadow color and its opacity, and turn on inset if the shadow should sit inside the box.
- For more layers, enter offsetX offsetY blur spread #hex opacity, one per line. Add inset as the last word when needed.
- Check the live preview, then copy the CSS rule into your stylesheet.
Example: Box Shadow Generator
Build a soft shadow below a card.
Options
- Offsets and radii
- The horizontal offset moves the shadow right or left and the vertical offset moves it down or up. Blur softens the edge, and spread grows or shrinks the shadow before the blur is applied.
- Color and opacity
- The color picker sets the shadow hue and the opacity sets how much background shows through, written as an rgba value in the CSS.
- Inset
- An inset shadow paints inside the box instead of behind it, which suits pressed buttons and input fields.
Supported inputs and limits
Where your input is processed
This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.
Why the preview box has a surface color
A shadow is a darker copy of the element's shape drawn behind it, so it only reads against a background that differs from the shadow color. The preview paints the box with the page's own surface color and keeps padding around it, so a shadow that looks weak in the preview will also look weak on a plain page. Check the rule on the real element before you keep it.
Questions about Box Shadow Generator
Why is my shadow invisible?
A large blur with a low opacity fades away quickly, and a shadow with the same tone as the background disappears. Raise the opacity or pick a color with more contrast against the surface.
What does spread do?
Positive spread grows the shadow before the blur is applied, and negative spread shrinks it. A negative spread equal to the blur is one common way to make a crisp edge.
Can I put the shadow inside the box?
Yes. Turn on inset and the shadow paints inside the element, which is how pressed buttons and inset fields are usually drawn.
Can I copy several shadows at once?
Yes. Extra shadow layers accepts one layer per line, for example 0 2px 4px 0 #000000 20% inset. The first layer uses the controls above it. The result combines all layers into one comma-separated box-shadow rule, with up to eight layers total.