CSS · Design

Box Shadow Generator

Tune a box shadow visually and copy the CSS in one click.

box-shadow: 0px 8px 24px 0px rgba(30, 58, 138, 0.18);

How to use

  1. Adjust X, Y, blur, spread, and opacity.
  2. Toggle inset if needed.
  3. Copy the CSS box-shadow value.

Features

  • Live preview
  • Inset option
  • Copy CSS
  • Runs in your browser. Colors and images are not uploaded to ToolsWeb servers.

Privacy & how it works

This design utility runs in your browser. Colors, CSS, and images you enter are not uploaded to ToolsWeb servers for this tool. Privacy Policy.

FAQ

Can I stack multiple shadows?expand_more

Copy one value, then combine multiple shadows with commas in your stylesheet.

Is this tool free?expand_more

Yes. No signup and no paywall for core use.

Is my text uploaded?expand_more

No for this tool. Text stays in your browser while you work.

Do I need an account?expand_more

No. Open the page and start typing or pasting.

Related tools