CSS box-shadow generator (multi-layer)
Adjust offset, blur, spread, colour, opacity and inset with a live preview, and copy the CSS.
About CSS box shadow
Move the sliders: X/Y set the direction, blur softens the edge, spread grows or shrinks the shadow and opacity sets its strength. Tick “inset” for an inner shadow or enable a second layer for the soft, deep shadows modern designs use.
Copy the CSS — it works in every browser.
FAQ
How do I make a soft shadow?
Use two layers: a tight one with little blur and a large, faint one.
More tools here
JSON formatter Base64 encode / decode Image ↔ Base64 URL encode / decode HTML entities Hash generator UUID generator JWT decoder Regex tester Cron generator Unix timestamp converter Code formatter Markdown preview Text ↔ binary Color converter Contrast checker CSS gradient JSON to CSV CSV to JSON YAML ↔ JSON JSON to TypeScript AES encryption TOTP generator Password strength checker CSS border radius Tailwind colors Color palette generator Aspect ratio calculator Chmod calculator