Calculator Converter
Design

Box shadow generator

Adjust a CSS box-shadow and copy the declaration.

Loading tool…

  1. 1 Set the X and Y offsets.
  2. 2 Set blur and spread.
  3. 3 Pick a colour and an opacity.
  4. 4 Copy the CSS. Turn on inset if the shadow should sit inside the box.

How it works

Shadows are easier to judge than to invent from numbers. Move offset, blur, spread, and colour, including opacity. The preview box uses the shadow as you edit, and the CSS is one box-shadow declaration. Inset shadows are available when you need an inner edge.

Frequently asked questions

Why does a large blur look faint?

The same opacity is spread over more pixels. Raise the opacity or darken the colour.

Can I stack two shadows?

This page makes one. You can paste a second box-shadow after a comma in your CSS.

See all

Contrast checker

Check the WCAG contrast ratio of two colours.

CSS gradient generator

Build a two-colour linear gradient and copy the CSS.