🍱 Lunchbox Hands

Box-Shadow Generator

Build CSS box-shadows visually with layered shadows and live preview

Build CSS box-shadow values visually — stack multiple layers, adjust offset, blur, spread, color, and inset, and copy the result. Everything runs in your browser.

Layer 1

X offset

Y offset

Blur

Spread

Color

Alpha0.20

Inset

box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2);

Related Tools

cubic-bezier() Editor Drag a curve to build a CSS easing function CSS clamp() Calculator Generate fluid clamp() font sizes Border-Radius Generator Round corners visually and copy the CSS Flexbox & Grid Playground Build Flexbox and CSS Grid layouts visually

Get weekly dev tools and tips