Add, layer, and customise CSS box shadows visually. Supports inset shadows, coloured shadows, and multiple layers. Copy CSS or Tailwind instantly.
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.
Neumorphism requires two shadows — one light, one dark — on a same-colour background: box-shadow: 8px 8px 16px #b8b9be, -8px -8px 16px #ffffff;
Box shadows do not affect layout. Multiple large shadows can impact paint performance on scroll, especially on mobile. Animate opacity instead of box-shadow for better performance.
Your data is processed entirely in your browser. Nothing is sent to any server.
CSS Output
box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.25);Tailwind
shadow-[4px_4px_8px_0px_rgba(0,0,0,0.25)]