Drag the sliders to shape a shadow, stack multiple layers for real depth and glows, toggle inset, and copy the exact box-shadow CSS — with a live preview the whole time.
QADIR OS agents generate, refactor and theme the CSS behind your product — components, tokens and shadows — automatically, on your own machine.
Join Early AccessThe CSS box-shadow property is deceptively deep: five values per shadow, an optional inset keyword, and a comma-separated list so you can stack as many shadows as you like. Guessing those numbers by hand and reloading the page is slow. This generator gives you a slider for every value and a live preview that updates as you drag, then hands you the exact box-shadow declaration to paste into your stylesheet.
A single shadow reads offset-x offset-y blur spread color, optionally prefixed with inset. Here is what each value controls:
| Value | What it does | Tip |
|---|---|---|
offset-x | Moves the shadow left (negative) or right (positive) | Keep small for a natural look |
offset-y | Moves the shadow up (negative) or down (positive) | A little positive Y reads as "lit from above" |
blur | Softens the edge; 0 is hard, high is diffuse | More blur = the object feels higher up |
spread | Grows (+) or shrinks (−) the shadow before blur | A small negative spread tucks the shadow in |
color | Any CSS colour — usually a translucent rgba() | Tint toward the background, avoid pure black |
inset | Draws the shadow inside the box | The key to recessed / pressed looks |
Real objects do not cast a single flat shadow, and neither should your UI. Stacking a couple of shadows — a tight, darker one close to the element plus a wider, softer one further out — produces the natural depth you see in polished design systems. The browser paints the list back-to-front, so the first shadow in your CSS sits on top. Use the layer chips above to add, select, and remove layers; the tool assembles the full comma-separated value for you.
The soft-UI "neumorphism" look is just two shadows in opposite directions: a dark one down-and-right and a light one up-and-left, both against a background of the same colour as the element. Pick the Neumorphism preset to see the pattern, then nudge the offsets and opacity to taste. Switch both layers to inset for the pressed-in variant.
Very large blur values on many elements can cost paint performance, especially while animating. If you animate a shadow, prefer transitioning box-shadow between two pre-defined states over recomputing huge blurs every frame, and test on a mid-range device. For a purely decorative glow that never changes, a big blur on a handful of elements is fine.
Everything here runs in your browser as plain JavaScript. Nothing you configure is uploaded, logged or stored — refresh and it resets. It is free with no signup, so it is safe for client work and internal projects.