Tooldeon

CSS box shadow generator

Move the sliders to set offset, blur, spread and opacity, add up to four layers and see the shadow change on a sample box. Copy the finished rule.

Layer 1

CSS

box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);

Runs in your browser: nothing you enter is sent anywhere.

How to use it

  1. Set the horizontal and vertical offset. Positive values move the shadow right and down.
  2. Adjust blur, spread, color and opacity.
  3. Tick Inset for an inner shadow, or press Add layer to stack another one.
  4. Press Copy and paste the rule into your stylesheet.

What the output means

box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25); reads: no horizontal offset, 4px down, 12px of blur, no spread, black at 25 percent opacity. With several layers the values are separated by commas. Zero values are written without units.

Example

A card with a close shadow and a wide soft one: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 8px 24px 0 rgba(0, 0, 0, 0.15).

Tips

  • Keep opacity low, usually 10 to 30 percent, for a natural look.
  • A shadow does not change the element’s layout, but it can be cut off by a parent with overflow: hidden.
  • Use a negative spread with a larger blur for a shadow that appears only on one side.

Frequently asked questions

What do blur and spread do?

Blur softens the edge: 0 gives a hard edge and larger values spread the fade over a wider band. Spread grows the shadow shape in all directions before blurring when positive and shrinks it when negative.

How do multiple layers work?

The browser draws the layers in the order written, the first on top. Combining a small tight shadow with a large soft one usually looks more natural than one big shadow. The tool allows up to four.

What does inset do?

The shadow is drawn inside the element's border instead of outside, as if the surface were pressed in. Inset and normal layers can be mixed in one rule.

Why is the color written as rgba()?

The opacity slider becomes the alpha value so the shadow stays see-through. At 100 percent opacity the tool writes a plain HEX code instead.

More in Color

All tools in this category: Color ·Updated November 3, 2026

Privacy choices

Google Analytics shows us which tools are used and whether they work. It may set cookies. Your choice is kept in this browser.