CSS Box Shadow Generator Online - Free Shadow Tool

Features

Slider controls

Color picker

Inset toggle

Multiple layers

Live preview & CSS code

How to Use

1. Shape the shadow with the sliders — the neutral card on the stage shows exactly what ships.

2. Real-world shadows are layered: add up to four layers, or start from a preset (Soft, Elevated, Floating, Inner).

3. Switch the stage surface to check the shadow on white, grey and deep backgrounds, then copy the CSS.

About this tool

Convincing shadows in interfaces are usually made of more than one layer: a tight, darker shadow for contact and a wide, soft one for distance. This generator lets you stack up to four box-shadow layers, adjusting horizontal and vertical offset, blur, spread, colour, opacity and inset for each, while a neutral card on the stage shows the exact result. Presets give you starting points — Soft, Elevated, Floating and Inner — and you can switch the stage between white, grey and dark surfaces to check that the shadow still reads on each. The generated CSS lists the layers in the correct order with rgba colours, ready to paste into a stylesheet or design token file.

Frequently Asked Questions

What do offset, blur and spread mean?

The X and Y offsets move the shadow right and down (negative values move it left and up). Blur softens the edge; larger values make it more diffuse. Spread grows or shrinks the shadow before it is blurred, so a negative spread keeps a soft shadow tucked under the element.

Why use multiple shadow layers?

Real objects cast a sharp shadow close to the surface and a softer one further away. Combining a small, darker layer with a large, faint layer looks more natural than one heavy shadow and is how most design systems define elevation.

What does inset do?

An inset shadow is drawn inside the element's border instead of outside, which makes it look pressed in. It is often used for input fields, wells and toggles.

Do shadows hurt performance?

Static shadows are cheap. Animating box-shadow on many elements can cause repaints, so for hover effects consider animating opacity of a pseudo-element that already has the shadow, or keep blur values moderate.

Why does my shadow look different on a dark background?

Dark shadows lose contrast on dark surfaces. Designs with a dark theme often reduce shadow opacity and rely on lighter surface colours or subtle borders to show elevation instead.