CSS Box Shadow Generator lets you build box-shadow rules with full control over offset X/Y, blur, spread, color, opacity, and inset. Stack multiple shadows by adding layers. A live preview card shows the result, and the complete CSS property is ready to copy.
Yes. Enable the 'Inset' toggle for any shadow layer to make it an inset (inner) shadow. Inset and outer shadows can be combined in the same stack.
Spread expands or contracts the shadow size before blur is applied. Positive values make the shadow larger than the element; negative values make it smaller, useful for tight, realistic shadows.
Yes. Add as many shadow layers as you need — each with its own offset, blur, spread, color, and inset setting. The tool combines them into a single comma-separated box-shadow value.
Blur softens the shadow's edges, spreading it outward with a gradient fade. Spread changes the shadow's size uniformly in all directions before blur is applied, with sharp edges.
Use a small offset (2-8px), moderate blur (8-16px), little or no spread, and a low-opacity dark color (e.g. 15-25% black). Layering two shadows — one tight, one soft — often looks more natural.
No, this tool generates box-shadow for elements. text-shadow uses a similar but distinct syntax (no spread value) and would need a separate generator.
Yes. box-shadow is supported in all modern browsers without vendor prefixes, including multiple comma-separated shadow layers.
