CSS Box Shadow Generator

A free online CSS box-shadow generator that lets you compose layered shadows with full visual control — then exports the exact CSS string for your stylesheet. Adjust horizontal and vertical offset, blur radius, spread radius, shadow color (with alpha), and toggle between outer drop shadows and inner insets. Box shadows are one of the most versatile tools in CSS for creating depth, elevation, and visual hierarchy. A soft, low-offset shadow gives a card the feeling of floating above the page — the kind of effect Material Design popularized. A sharp, zero-blur shadow creates a retro, sticker-like outline. Inset shadows simulate pressed buttons and inset form fields, while multiple stacked shadows at increasing blur radii produce smooth, realistic elevation used by modern component libraries like Radix and Shadcn. This editor goes beyond a single shadow: stack as many layers as you need, reorder them with drop, and fine-tune each independently. The live preview updates pixel-by-pixel as you drag sliders or type values. Toggle between light and dark background modes to see how your shadow reads on different surfaces. Color supports hex, rgba, and hsla formats with an alpha slider for translucency. Copy the generated box-shadow property, vendor-ready, into Tailwind arbitrary values, CSS modules, or inline styles.