What do the four lengths mean?

In order: horizontal offset, vertical offset, blur radius and spread radius. Positive offsets move the shadow right and down.

How is opacity handled?

The chosen opacity is converted to an alpha value and appended to the hex colour, so the copied CSS is self-contained.

An inset shadow is drawn inside the element's edges, creating a pressed-in or recessed look instead of a raised one.

Generators

Design a CSS box shadow with sliders and copy the CSS.

Free foreverRuns in your browserNo sign-up

Offset X: 0

Offset Y: 10

Blur: 25

Spread: -5

Opacity %: 25

Shadow color

Inset shadow

box-shadow: 0px 10px 25px -5px #0F172A40;

Adjust the sliders to shape the shadow, then copy the CSS. Colour opacity is baked into the hex value.

The CSS box-shadow property adds depth to elements with an offset, blur, spread and colour. Getting the values right by hand can be fiddly.

This tool gives you sliders for each value with a live preview, then hands you the exact CSS to copy.

You can also make the shadow inset to create a recessed effect.

Soft drop shadow

Output: box-shadow: 0px 10px 25px -5px #0F172A40;

A downward offset with blur and a slightly negative spread creates a soft, modern shadow.

What do the four lengths mean?: In order: horizontal offset, vertical offset, blur radius and spread radius. Positive offsets move the shadow right and down.
How is opacity handled?: The chosen opacity is converted to an alpha value and appended to the hex colour, so the copied CSS is self-contained.
What is an inset shadow?: An inset shadow is drawn inside the element's edges, creating a pressed-in or recessed look instead of a raised one.