Visual CSS box-shadow generator with multi-layer support. Adjust offset, blur, spread, and color with live preview. No data leaves your browser.
More free utilities you might find useful
Quick answers to common questions
box-shadow: offset-x offset-y blur-radius spread-radius color; Example: box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.25); Add "inset" for inner shadows. Multiple layers are comma-separated.
Neumorphism needs two shadows — one light, one dark — on a matching background colour. Use the Neumorphic preset, or stack: box-shadow: 8px 8px 16px rgba(163,163,163,0.45), -8px -8px 16px rgba(255,255,255,0.9);
No. Box shadows do not affect layout or box size. Large multi-layer shadows can affect paint performance on scroll; prefer animating opacity over box-shadow when possible.
No. Shadow math and CSS generation run entirely in your browser.
Your data is processed entirely in your browser. Nothing is sent to any server.
Shadow layers (1)
Presets
CSS
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.25);Tailwind
shadow-[4px_4px_8px_0px_rgba(0,_0,_0,_0.25)]No data leaves your browser — this tool doesn't even need internet after loading.