Adjust offset, blur, spread and colour with a live preview and copy the box-shadow CSS.
box-shadow takes up to five values in order: horizontal offset (positive moves it right), vertical offset (positive moves it down), blur radius (0 is a hard edge), spread (positive makes it bigger than the element, negative smaller) and colour. The tool writes the colour as rgba() so the opacity slider controls how strong the shadow looks.
Inset puts the shadow inside the element's border instead of behind it, which makes it look pressed in.
Real shadows are soft and faint. A small downward offset, a generous blur and low opacity, such as 0px 10px 30px at 10 to 20% black, looks more natural than a dark, hard shadow. For extra depth you can stack two shadows in CSS, separated by a comma, such as a tight one and a wide one; this tool makes one at a time, so combine them by hand.
Blur softens the edge. Spread changes the size of the shadow before it's blurred.
Use an offset on that side and a negative spread about the size of the blur, so the shadow doesn't show elsewhere.
No. Shadows don't take up space or move other elements.
Yes. It works on any element, including img. For PNGs with transparency, filter: drop-shadow follows the shape instead of the box.
OneClickly is a set of 119 free tools for PDFs, images, text, everyday math and code. They run in your browser, so the files and text you work with stay on your device.