CSS Box Shadow Generator

Design CSS box-shadow values visually. Add, edit, reorder, toggle and remove multiple shadows with offset, blur, spread, colour, opacity and inset controls, preview them on a card, and copy or download the CSS.

Developer Runs client-side Free to use

Jump to the tool

About the CSS Box Shadow Generator

CSS Box Shadow Generator lets you build a box-shadow value by moving sliders instead of guessing numbers. Each shadow has a horizontal and vertical offset, blur radius, spread radius, colour, opacity and an inset switch. You can stack up to eight shadows, switch individual shadows off without deleting them, move them up or down (the first shadow is drawn on top) and remove the ones you do not need. A sample card shows the result live on a light or dark background.

The generated CSS is a valid box-shadow declaration built only from range-checked numbers and colours chosen with the picker, so no typed CSS is injected into the page. A Random Preset button creates a fresh, always-valid combination for inspiration, and Reset restores the documented default: a single outer shadow of 0px 10px 25px -5px in #0f172a at 25% opacity.

How to use

Adjust the default shadow’s offsets, blur, spread, colour and opacity.
Tick Inset for an inner shadow, or untick Enabled to hide a shadow temporarily.
Use Add Shadow to layer more shadows, and Move up, Move down or Remove to organise them.
Switch the preview background between light and dark, or try Random Preset.
Copy the CSS or download it as a .css file.

Key features

Up to eight layered shadows with live preview.
Horizontal and vertical offset, blur, spread, colour, opacity and inset for every shadow.
Enable/disable, reorder and remove individual shadows.
Random Preset that always produces valid values.
Light and dark preview backgrounds.
Copy CSS, Download .css and Reset to a documented default.

Best practices

Use low opacity and generous blur for natural-looking elevation.
Combine a tight, darker shadow with a wide, soft one for realistic depth.
Use negative spread to keep a large blur from spreading too far sideways.
Check shadows on both light and dark backgrounds if your site has a dark theme.
Avoid very large or many layered shadows on elements that animate, as they can be costly to paint.

Benefits

See exactly how each value changes the shadow before you write any CSS.
Produce clean, valid box-shadow code ready to paste.
Experiment freely with layering and inset effects.
Works entirely in your browser.

Frequently asked questions

In what order are multiple shadows drawn?

The first shadow in the list (and in the CSS) is drawn on top, and later shadows are drawn underneath. Use Move up and Move down to change the order.

What does spread radius do?

Spread grows (positive values) or shrinks (negative values) the shadow before it is blurred. A negative spread with a large blur creates a soft shadow that stays close to the element.

What is an inset shadow?

An inset shadow is drawn inside the element’s border instead of outside it, which can make a surface look pressed in. You can mix inset and outer shadows in one declaration.

What happens if I disable every shadow?

The generated CSS becomes box-shadow: none; and the preview shows no shadow. Your disabled shadows stay in the list so you can turn them back on.

Is the generated CSS safe to paste into my stylesheet?

Yes. It is built only from numbers within fixed ranges and colours from the colour picker, producing a standard box-shadow declaration. box-shadow is supported by all current major browsers; test on any very old browsers you need to support.

What does Reset do?

Reset removes any shadows you added and restores the default single outer shadow (0px 10px 25px -5px, #0f172a at 25% opacity) and the light preview background.