Online CSS Box Shadow Generator

Visual Box Shadow editing / multiple layers / inset shadows / one-click CSS copy

Shadow 1

X offset: 4px

Y offset: 4px

Blur: 10px

Spread: 0px

Opacity: 25%

Color: inset

Generated CSS

.element {
  box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
}

Box Shadow Tips

CSS box-shadow adds a drop shadow to an element and supports multiple stacked layers. Use inset to create an inner shadow. Combining layers simulates more realistic lighting. Pair it with the Gradient Generator for richer visuals.

FAQ

Can the generator set multiple shadow layers?

Yes, click “Add shadow layer” to add layers. Each layer independently sets offset, blur, spread and color, and you can preview the stacked effect.

Does it support inset shadows?

Yes. Each layer has its own inset checkbox for an inner shadow, commonly used for pressed buttons and input fields.

Can the generated shadow CSS be copied into a project directly?

Yes. The copy button produces standard CSS box-shadow code, ready to paste, with comma-separated multiple layers.