Box Shadow Generator
Design CSS box shadows with live preview and copy ready-to-use code.
Runs locally — nothing is uploaded
How to use
- 1
Adjust shadow
Tweak offset, blur, spread, color, and inset.
- 2
Preview
See the shadow on a live card element.
- 3
Copy CSS
Copy the box-shadow rule into your stylesheet.
Frequently Asked Questions
This tool generates a single shadow layer. Duplicate the rule for stacked shadows.
Any valid CSS color, including hex with alpha like #00000040.
Yes. Toggle Inset to draw the shadow inside the preview card.
A live card with adjustable offset, blur, spread, shadow color/opacity, and optional inset.
Related tools
QR Code Generator
Create styled QR codes for links, Wi‑Fi, contacts, and more. Logo and colors stay in your browser.
Developer Tools
Barcode Generator
Generate CODE128, EAN13, UPC, and CODE39 barcodes from text. Download as PNG.
Developer Tools
JSON Formatter
Format, validate, and minify JSON with clear error messages.
Developer Tools
Base64 Encoder / Decoder
Encode and decode text or images to Base64. Works entirely offline.
Developer Tools