This CSS box shadow generator builds production-ready shadows with visual sliders for offset, blur, spread, color and the inset keyword. Stack unlimited shadow layers to create Material-style elevations, neumorphic surfaces, neon glows, or soft ambient lighting. Every change updates the live preview and rewrites the CSS in real time, so you can copy the finished declaration straight into your stylesheet. Pick a preset to start fast, or dial in custom values on both axes. All calculation runs in your browser — no sign-up, no tracking, works offline once the page is cached.
Last updated: March 2026inset keyword. Positive h-offset moves the shadow to the right; positive v-offset moves it down. Blur softens the edge — a blur of 0 creates a hard-edged shadow, while larger values create a diffuse gradient. Spread grows or shrinks the whole shadow uniformly before blurring. The inset keyword paints the shadow inside the element instead of outside.box-shadow declaration. The first shadow renders on top of the next, so layer your sharp, close shadows first and softer, wider shadows after. Stacking is how designers achieve Material Design elevations (typically three layers: ambient, key, and contact), neumorphic surfaces (one light and one dark shadow from opposite directions), and realistic ambient lighting. This generator supports as many layers as you need — use the + Add layer button to create a new one.will-change: box-shadow hint, or animate a pseudo-element's opacity instead of the shadow property itself to keep the animation on the compositor thread. Avoid animating the blur radius on every frame.rgba(17, 24, 39, 0.15)) reads as more natural because real-world shadows pick up ambient color tint. The Paper and Soft presets above demonstrate this layered approach.border-radius, so a rounded card gets a rounded shadow without any extra work. This is different from filter: drop-shadow(), which follows the actual painted shape including transparent PNG edges. Use box-shadow for rectangular and rounded-rectangular elements; use drop-shadow for irregular shapes, SVG icons, or elements with transparent cut-outs.