Box Shadow Generator
Build polished CSS box shadows with live preview, layered presets, color controls, and copy-ready output for plain CSS, Tailwind arbitrary values, and CSS variables.
Everything runs locally in this page. Adjust the shadow, copy the code, and paste it into your project without uploading anything.
Live Shadow Preview
Use presets for speed, then fine-tune each shadow layer.
Shadow Controls
Select a layer, then adjust the values below.
Copy Shadow Code
Use the CSS output for production. Tailwind output is best for single-layer utility use.
box-shadow: 0 20px 48px -18px rgba(15, 23, 42, 0.35);
Multiple comma-separated shadows are valid CSS. For Tailwind, complex multi-layer values are usually easier to keep in a CSS class or variable.
Detailed guide
Need the assumptions, examples, and troubleshooting?
The calculator stays focused here. The supporting reference has moved to its own page.
Read the Box Shadow Generator guide