Box Shadow Generator

Build a box-shadow with offset, blur, spread and colour, and copy the CSS. Runs entirely in your browser.

Offset X0px
Offset Y10px
Blur25px
Spread-5px
Opacity25%
Colour#000000
CSS
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.25);

Processed on your device. This file is never uploaded.

  1. 1Adjust the offset, blur, spread and colour.
  2. 2Toggle inset for a recessed look if you want it.
  3. 3Copy the box-shadow CSS.

Shadows, tuned by eye

A good shadow is a matter of small numbers — a few pixels of offset, a soft blur, a low opacity. Getting them right by editing CSS and reloading is slow; here you drag sliders and the preview responds instantly, so you can find a shadow that reads as a natural elevation rather than a hard drop.

Every parameter, including inset

Offset, blur, spread, colour and opacity are all here, plus the inset toggle for recessed shadows. The output is a single, ready-to-paste box-shadow declaration. It all runs on your device with nothing uploaded.

Frequently asked questions