How many shadows can I layer on one element?

The CSS specification does not define a limit. In practice, most browsers handle up to 10-20 layers without rendering performance issues. The tool supports up to 8 shadow layers in the visual editor, which covers all practical design use cases. Each layer is independently editable. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.

Is my shadow configuration sent to a server?

No. The tool runs entirely in your browser. All rendering is done by your browser's CSS engine on the page element itself. The CSS string is assembled by local JavaScript. Nothing is transmitted anywhere.

What is the difference between blur-radius and spread-radius?

Blur-radius controls how soft and diffuse the shadow edge is. A blur of 0 produces a sharp, hard shadow identical to the element's outline. Spread-radius changes the size of the shadow before blurring: positive values make the shadow larger than the element, negative values make it smaller. You can use a large blur with a negative spread to create a soft, contained shadow that does not extend beyond the element's bounds.

How do I create an inset shadow (inner shadow)?

Add the inset keyword to your shadow definition. The tool has an \\\\\\\"inset\\\\\\\" toggle for each shadow layer. Inset shadows render inside the element border rather than outside, useful for pressed or recessed UI states. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.

What is a negative spread-radius used for?

Negative spread shrinks the shadow so it is smaller than the element. This is useful when you want a soft blur shadow that appears only below the element (not on the sides), by combining a positive offset-y with a negative spread. Example: box-shadow: 0 8px 16px -8px rgba(0,0,0,0.3) creates a shadow that projects only downward.

Does box-shadow affect layout or spacing?

No. Box shadows do not affect the box model. They do not push neighboring elements or change the element's computed size. If you need space around an element that other elements respect, use the outline property or margin instead.

CSS Box-Shadow Generator

This tool builds CSS box-shadow property values using a visual editor. Adjust offset, blur, spread, color, and opacity with sliders, see the result on a live preview element, and copy the ready-to-use CSS. You can layer multiple shadows on a single element. All processing runs in your browser. Your settings and generated code never leave your device.

How this tool works

The CSS box-shadow property adds shadow effects around an element's frame. Each shadow is defined by four length values, an optional color, and an optional inset keyword. box-shadow syntax: `css box-shadow: [inset] offset-x offset-y blur-radius spread-radius color; `

Worked example

You want a card component with a soft elevation shadow and a subtle colored accent shadow at the bottom. Shadow 1 (elevation): - offset-x: 0, offset-y: 4px, blur: 16px, spread: -2px, color: rgba(0,0,0,0.12)

Frequently asked questions

How many shadows can I layer on one element?
The CSS specification does not define a limit. In practice, most browsers handle up to 10-20 layers without rendering performance issues. The tool supports up to 8 shadow layers in the visual editor, which covers all practical design use cases. Each layer is independently editable. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.
Is my shadow configuration sent to a server?
No. The tool runs entirely in your browser. All rendering is done by your browser's CSS engine on the page element itself. The CSS string is assembled by local JavaScript. Nothing is transmitted anywhere.
What is the difference between blur-radius and spread-radius?
Blur-radius controls how soft and diffuse the shadow edge is. A blur of 0 produces a sharp, hard shadow identical to the element's outline. Spread-radius changes the size of the shadow before blurring: positive values make the shadow larger than the element, negative values make it smaller. You can use a large blur with a negative spread to create a soft, contained shadow that does not extend beyond the element's bounds.
How do I create an inset shadow (inner shadow)?
Add the inset keyword to your shadow definition. The tool has an \\\\\\\"inset\\\\\\\" toggle for each shadow layer. Inset shadows render inside the element border rather than outside, useful for pressed or recessed UI states. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.
What is a negative spread-radius used for?
Negative spread shrinks the shadow so it is smaller than the element. This is useful when you want a soft blur shadow that appears only below the element (not on the sides), by combining a positive offset-y with a negative spread. Example: box-shadow: 0 8px 16px -8px rgba(0,0,0,0.3) creates a shadow that projects only downward.
Does box-shadow affect layout or spacing?
No. Box shadows do not affect the box model. They do not push neighboring elements or change the element's computed size. If you need space around an element that other elements respect, use the outline property or margin instead.