ffee All tools
EN 中文 FR DE

Box Shadow Generator

Design a CSS box shadow visually and copy the generated CSS.

Shadow settings

box-shadow: 0 10px 24px 0 rgba(0,0,0,0.25);
Adjust the sliders and copy the CSS into your stylesheet.

How to use the Box Shadow Generator

  1. Move the sliders to set the offset, blur, spread and opacity.
  2. Pick a shadow color with the color input.
  3. Click Copy CSS and paste it into your stylesheet.

Features

Advertisement

More tools

CSS Gradient Generator Border Radius Generator Image Compressor Image Info Image Converter Image to Base64 Base64 to Image Grayscale Converter Image Cropper Image Resizer Image Rotator Image Filter

Frequently Asked Questions

Common questions about the free online box shadow generator.

The horizontal and vertical offsets move the shadow, blur softens its edge, spread grows or shrinks it, and opacity sets how strong it is.
Copy the box-shadow line and paste it into the rule for your element in your stylesheet.
A negative spread shrinks the shadow so it stays closer to the element, which can look sharper and more subtle.
This generator creates outer shadows. To make an inset shadow, add the word inset at the start of the generated value.
No. Everything runs locally in your browser, so your data never leaves your device.
Yes. The tool is fully responsive and works in any modern browser on desktop, tablet and phone.
Yes. Generate one shadow, copy it, then add a comma followed by the next shadow value in your CSS.
Yes, it is completely free with no account required.

Last updated: October 10, 2026