Create and customize CSS box shadows visually — copy the code instantly
box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.30);
The Box Shadow Generator is a visual builder for the CSS box-shadow property. Instead of guessing at values, you drag sliders for horizontal offset, vertical offset, blur radius, and spread radius, pick a shadow color with adjustable opacity, and toggle the inset keyword — while a live preview element updates instantly and the exact box-shadow declaration is written out for you to copy.
It is built for front-end developers, UI designers, and anyone hand-writing CSS who wants to nail the depth and softness of a shadow without repeatedly editing code and refreshing the browser. Because every control maps directly to a real box-shadow token, the output is production-ready CSS you can paste straight into a stylesheet, a styled-component, or a Tailwind arbitrary value.
The CSS box-shadow property follows the syntax: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. For example, box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) means no horizontal shift, a 4px downward offset, 6px of blur, a 1px negative spread that keeps the shadow tucked under the element, and a 10 percent black color. This tool assembles exactly that string from your slider positions.
Offset-x and offset-y position the shadow; blur-radius controls how gradually the shadow fades (0 gives a hard edge); and spread-radius expands or contracts the shadow's size before blurring is applied. The optional inset keyword flips the shadow inside the border box. You can stack multiple shadows by separating declarations with commas, which is how layered, realistic elevation effects are built — many designs combine a tight, dark shadow with a wider, lighter one to mimic ambient and direct light.
Yes, it is completely free with no sign-up. Everything runs locally in your browser using JavaScript, so no CSS values, colors, or settings are uploaded to a server.
Blur radius controls how soft or feathered the shadow edge is, while spread radius changes the shadow's overall size before the blur is applied. A larger spread makes a bigger shadow, and a negative spread shrinks it inward.
Enable the inset option. This adds the inset keyword to the declaration, which draws the shadow inside the element's box instead of casting it outward — commonly used for pressed buttons, input fields, and recessed panels.
Yes. Increase the blur radius and lower the shadow color's opacity. Modern UI shadows typically use a low-alpha color like rgba(0,0,0,0.1) combined with a moderate blur rather than a solid dark color.
The standard box-shadow property is supported in all modern browsers without a vendor prefix. Only very old browsers such as Internet Explorer 8 and earlier lack support, so no prefix is needed for current projects.
Yes. Copy the generated value and drop it into a Tailwind arbitrary value like shadow-[...], a styled-component template literal, or any plain CSS rule — the output is a valid box-shadow value either way.
The box-shadow property accepts multiple comma-separated shadows. Generate each shadow here, then join them with commas in your CSS to layer them, for example a tight dark shadow plus a wider light one for realistic depth.