CSS Box Shadow Generator

Adjust offset, blur, spread, colour and opacity while seeing the result, then take the CSS. Includes presets that layer several shadows for a more natural sense of depth.

🎨 Everything runs in your browser. No install, no sign-up.

Offset X0px

Offset Y8px

Blur20px

Spread-4px

Shadow colour

Opacity20%

Inset shadow — a pressed-in look

box-shadow: 0px 8px 20px -4px rgba(15, 23, 42, 0.20);

A natural shadow usually falls straight down (offset X of 0), and uses a faint navy rather than black — slightly darker than the background. Pure black shadows look muddy.

What this tool does

Offset, blur, spread and colour
Inset shadows supported
Natural multi-layer presets
Copy the CSS

Other colour tools

CSS Gradient GeneratorBuild a CSS gradient from two or three colours Colour Palette GeneratorPull colours that work with a base colour, by rule Colour Shades GeneratorTurn one colour into a 50–900 scale Colour MixerFind the colour between two colours

Colours may look slightly different depending on your screen and its colour profile.