What does the 'inset' toggle do?

By default, box shadows appear outside the element. Toggling 'inset' makes the shadow appear inside the element's border, creating a pressed or embossed effect.

What is the difference between blur and spread?

Blur radius controls how soft/fuzzy the shadow edges are — higher values mean more blur. Spread radius expands or shrinks the shadow size; a positive spread makes it larger than the element, a negative spread makes it smaller.

Can I add multiple shadow layers?

Yes. Click 'Add Layer' to stack shadows. Multiple shadows are comma-separated in CSS and rendered back-to-front. This lets you create complex lighting and depth effects.

How do I remove a shadow layer?

Each shadow layer has a × button to delete it. You need at least one layer, so the last layer cannot be removed.

design Free No signup

Box Shadow Generator

Build CSS box-shadow values visually with live preview — supports multiple layers.

Loading tool…

About this tool

Design CSS box shadows without guessing numbers. Adjust horizontal and vertical offsets, blur radius, spread, color, and the inset flag interactively. Stack multiple shadow layers for sophisticated depth effects. A live preview card shows the result instantly, and the full CSS declaration is always ready to copy.

How to use

1 Adjust the sliders for offset, blur, and spread on the first layer.
2 Pick a shadow color and toggle inset if needed.
3 Click 'Add Layer' to stack additional shadows for complex effects.
4 Copy the box-shadow CSS declaration and paste into your stylesheet.

Frequently Asked Questions

Related tools

CSS Gradient Generator

Visually build CSS linear and radial gradients and copy the ready-to-use CSS property.

Color Converter (HEX, RGB, HSL)

Convert colors between HEX, RGB, HSL, HSV, and CMYK — with live preview.

Color Palette Generator

Generate harmonious color palettes — complementary, triadic, analogous, and split-complementary — from any base color.