CSSボックスシャドウ作成

What this tool does

Tune one CSS box-shadow and copy the declaration, with a preview that uses the same numbers. Use it when a card or a button needs a drop shadow or an inset shadow. Offsets, blur, and spread become whole pixels, and stacked shadows have to be combined in your stylesheet.

How to use

1. Adjust horizontal and vertical offset, blur, spread, color and opacity.
2. Turn on inset if you want an inner shadow.
3. Copy the CSS. The preview uses the same values.

Examples

• A soft drop shadow

  box-shadow: 0 8px 24px rgba(15, 39, 68, 0.2);

How it works

Offset shifts the shadow. Blur softens the edge. Spread grows or shrinks the shadow before blur. Opacity is applied as RGBA. The preview and the copied CSS use the same computed value.

Limitations

The generator writes a single box-shadow. Comma-separated layers are not assembled for you. Offsets, blur, and spread are rounded to whole pixels, and a color the parser rejects yields no declaration. The preview is a sample box, not an element from your page.

See the disclaimer for what these tools do not cover.

FAQ

Is the Box Shadow Generator free?

Yes. Tuning one CSS box-shadow and copying the declaration is free, with no signup.

Can I stack several shadows?

This version generates one shadow. You can combine copied values manually in your stylesheet if you need layers.

Are the pixel values rounded?

Offsets, blur, and spread become whole pixels in the copied CSS. A fractional slider position does not stay fractional.

Does inset change the color?

Inset only draws the shadow inside the box. Color and opacity stay at the values you set.