← All text tools

CSS box shadow generator

Design box shadows with sliders and a live preview, then copy the CSS.

  • Free
  • No sign-up
  • Works on any device

About CSS box shadow generator

Adjust offset, blur, spread, colour and opacity on a live preview and copy the box-shadow declaration. The values are x offset, y offset, blur radius, spread radius and colour, in that order. Add inset to draw the shadow inside the box, and keep opacity low for natural results.

How to use CSS box shadow generator

  1. Set the options above. The result updates live.
  2. Change anything until it's just right.
  3. Copy the result or download it.

Why use this tool?

Also known as

Frequently asked questions

What does the spread value do in box-shadow?

Spread grows or shrinks the shadow before blur is applied. A positive number makes it larger than the box, a negative one makes it smaller, which is good for shadows only on one side.

Is CSS box shadow generator free?

Yes. CSS box shadow generator on Toolipedia is free to use, with no sign-up and no watermark.

Is it safe to use?

Yes. Everything is worked out in your browser, and nothing you enter is sent to our server.

Does it work on my phone?

Yes. It works in any modern browser on Android and iPhone, as well as on tablets and computers. There's nothing to install.

Do I need an account?

No. Just open the page and use the tool. There's no sign-up and no email needed.

Related tools