CSS Box Shadow Generator

Design box shadows visually and copy the CSS.

Layer 1

Horizontal offset0px

Vertical offset1px

Blur3px

Spread0px

Colour

Opacity12%

Inset (inner shadow)

Layer 2

Horizontal offset0px

Vertical offset8px

Blur24px

Spread-4px

Colour

Opacity10%

Inset (inner shadow)

CSScss

box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12), 0px 8px 24px -4px rgba(0, 0, 0, 0.10);

Tailwind arbitrary value

shadow-[0px_1px_3px_0px_rgba(0,_0,_0,_0.12),_0px_8px_24px_-4px_rgba(0,_0,_0,_0.10)]

Two or three subtle layers look far more realistic than one heavy shadow: a tight dark one close to the element plus a wider, softer one further out mimics how light actually behaves.

What does CSS Box Shadow Generator do?

Build CSS box shadows with sliders for offset, blur, spread and colour, including inset shadows and multiple layered shadows — which is how realistic elevation is actually achieved.

How to Use CSS Box Shadow Generator

1
Adjust the slidersOffset, blur and spread.
2
Set the colour and opacityLow opacity black reads as natural shadow.
3
Add more layersTwo or three subtle shadows beat one heavy one.
4
Copy the CSSPaste into your stylesheet.

Key Features

Sliders for horizontal offset, vertical offset, blur, spread and opacity
Multiple layered shadows, which is what makes elevation look real
Inset shadows for inner depth
Live preview on a configurable background
Presets matching common elevation scales
Copy-ready CSS with a Tailwind arbitrary-value variant

Frequently Asked Questions

What do the box-shadow values mean?

In order: horizontal offset, vertical offset, blur radius, spread radius, then colour. Blur softens the edge; spread grows or shrinks the shadow before blurring. The inset keyword moves it inside the element.

How do I make a shadow look realistic?

Layer two or three. A tight, slightly dark shadow close to the element plus a wider, very soft one further out mimics how real light behaves. A single large blur looks flat and artificial.

What is the difference between box-shadow and drop-shadow?

box-shadow follows the element’s rectangle and border radius. filter: drop-shadow follows the actual visible shape, including transparency in a PNG or SVG, which is what you want for irregular graphics.

Do shadows affect performance?

Large blur radii are expensive to composite, especially when animated. Animate transform and opacity instead of the shadow itself, or pre-render a shadow onto a pseudo-element and fade it.

Runs in your browser

Everything is generated in your browser. Nothing is sent to a server, so results are private and the tool keeps working offline.

How the rest of the site handles data