CSS Box-Shadow Generator

A box-shadow in CSS is built from six values: horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword. Getting these numbers right by typing them out is slow, especially when you are trying to match a shadow from a design file or reproduce an effect you saw on another site. This generator turns that guesswork into a visual process.

Move the sliders and the preview box updates immediately, so you can see exactly how the shadow behaves before it ever touches your stylesheet. The horizontal and vertical offset sliders push the shadow left, right, up, or down. Blur controls how soft the edge looks, spread grows or shrinks the shadow independent of the shape it comes from, and the color picker sets both the hue and the opacity. Flip the inset switch to turn an outer drop shadow into an inner shadow that reads as a pressed or recessed surface.

Because real interfaces rarely use one shadow, you can stack several layers on top of each other. Layering a tight, dark shadow with a wider, softer one is how most modern card designs and buttons get their depth. The presets at the top give you a fast starting point for soft, hard, long, and neumorphic-style shadows, which you can then fine-tune. Once the effect looks right in the preview, copy the generated CSS and paste it straight into your project.