CSS Box Shadow Generator

How to use

1. 1Pick a quick preset (Soft, Floating, Material, Glow, Neumorphism, Inset soft, Long shadow, Focus ring) to start with a credible baseline you can tune.
2. 2Adjust each layer with the sliders: X and Y offset move the shadow, Blur softens the edge, Spread grows or shrinks it, and Opacity sets the alpha channel.
3. 3Add or remove layers (up to 6) and use Move up or Move down to reorder them. The first layer paints on top, so stacking order changes how the shadow reads.
4. 4Toggle Inset on a layer to switch it from a drop shadow to an inner shadow, or change the layer color with the native picker or hex field.
5. 5Use the preview controls (light or dark background, rounded card or square or circle shape) to confirm the shadow works in your real UI context.
6. 6Click Copy CSS to grab the box-shadow declaration, or Copy class to grab the Tailwind v3+ arbitrary-value utility.

About this tool

CSS Box Shadow Generator builds production-ready box-shadow values in your browser with a live preview that uses the exact CSS the tool will copy. Stack between 1 and 6 shadow layers and tune each one independently with sliders for X offset (-100 to 100 pixels), Y offset (-100 to 100 pixels), blur radius (0 to 200 pixels), spread radius (-100 to 100 pixels), color, opacity (0 to 100 percent), and an inset toggle that flips a layer from a drop shadow to an inner shadow. Layer ordering matters in CSS (the first layer paints on top), so each layer has Move up and Move down controls plus a per-layer remove button so you can fine-tune the stack without retyping. Quick presets cover the looks most teams reach for: Soft (low-contrast card shadow), Sharp (crisp 1-pixel offset), Floating (two-layer lift), Material (Material Design elevation), Glow (colored outer glow for buttons and badges), Neumorphism (twin opposing shadows for the soft embossed look), Inset soft (gentle inner shadow for inputs), Long shadow (stacked offsets for the long-shadow trend), and Focus ring (spread-only outline for accessible focus states). The preview canvas can switch between a light and dark background and between three preview shapes (rounded card, square, circle) so you can verify the shadow reads correctly in any context. Output emits a copy-ready CSS declaration (`box-shadow: ...`) and a Tailwind v3+ arbitrary-value class (`shadow-[...]`) so the same value drops cleanly into vanilla stylesheets, CSS-in-JS, design tokens, or utility-first projects. Layers at full opacity emit hex colors and layers below 100 percent emit rgba so the output stays portable across older browsers, framework theme tokens, and design tools that import CSS. Useful for card and panel elevation, button hover and focus states, modal and tooltip styling, neumorphic UI experiments, glow and accent effects, long-shadow design, and any UI where you need a precise box-shadow value without trial and error in DevTools. Everything runs locally on your device, so the colors and parameters you experiment with here are never uploaded.

Free to use. Works in your browser. No signup, no login.