CSS tool
Set offset, blur, spread, color, and inset. Stack layers, paste an existing shadow, and copy CSS or a Tailwind arbitrary class. It all stays on your device.
Like the tool? Find a bug?Share with usPreview
Layers
Color
box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.18);
shadow-[0px_10px_30px_-8px_rgb(15_23_42_/_0.18)]
filter: drop-shadow(0 10px 30px rgba(15, 23, 42, 0.18));
Guide
01
CSS box-shadow paints one or more shadows on an HTML box. Each layer is offset, blur, spread, and a color — optionally inset.
02
Soft, Sharp, Glow, Inset, Neumorph, and Long are starting points. Paste 0 10px 15px -3px rgb(0 0 0 / 0.1) to reverse a value into sliders.
03
Copy a box-shadow declaration, a Tailwind shadow-[…] class, or filter: drop-shadow() for non-inset layers. Nothing leaves the browser.
Use it
Use CSS for stylesheets and inline style attributes. Use Tailwind when the rest of the UI is utilities. Filter is for silhouettes and PNGs — it cannot express inset or spread. Multiple layers become a comma-separated list.
FAQ
Yes. Paste a box-shadow declaration or just the value. Offset, blur, spread, inset, and common colors map back onto the controls.
Paste is capped at 50,000 characters so a huge dump cannot freeze the tab. Eight layers is the working maximum for a readable shadow stack.
No. Parsing and preview happen in your browser tab. There is no account and no API call.