Box Shadow Generator

Generate CSS box-shadow code visually with a live preview — offset, blur, spread, colour, and inset.

Developers crafting CSS shadows for cards, buttons, and UI elements.

How to use it

  1. Adjust the sliders

    Set the horizontal and vertical offset, blur, and spread while watching the preview.

  2. Set colour and opacity

    Pick the shadow colour and how strong it appears.

  3. Copy the CSS

    Toggle inset if needed, then copy the ready-to-use box-shadow code.

Why use this tool?

The CSS box-shadow property has several values — offset, blur, spread, colour, and inset — that are hard to tune blindly. A visual editor with a live preview lets you dial in exactly the depth and softness you want.

Common use cases

Cards & panels

Give cards a subtle lift off the page with a soft shadow.

Buttons

Add depth or pressed (inset) effects to buttons.

Design systems

Generate consistent elevation shadows for a component library.

Frequently asked questions

What does the spread value do?

Spread grows or shrinks the shadow before the blur is applied — positive values make it larger, negative smaller.

What is an inset shadow?

Inset draws the shadow inside the element instead of outside, useful for pressed or recessed effects.

Can I stack multiple shadows?

Yes — copy this value and combine several comma-separated shadows in your CSS.

Related tools