CSS Box Shadow Generator

Create CSS box shadows visually with live preview

Controls

Preview

Card Preview

Generated CSS

People Also Use These Tools

Button Generator

Design custom CSS buttons

Gradient Generator

Build CSS gradients

Card Generator

Design UI cards

About This Tool

The CSS Box Shadow Generator lets you create box shadows visually. Adjust horizontal/vertical offset, blur, spread, color, and opacity — then copy the CSS property directly into your stylesheet.

How to Use

  1. Adjust the offset, blur, and spread sliders to shape the shadow.
  2. Pick a shadow color and set the opacity percentage.
  3. Toggle Inset to make the shadow appear inside the element.
  4. Click Copy CSS to copy the box-shadow property.

Why Choose OmniTools?

⚡ Instant Results

Live preview updates as you drag the sliders.

🛡️ 100% Private

Everything runs in your browser. No data sent anywhere.

Frequently Asked Questions

What does spread radius do?

Spread radius expands or contracts the shadow. Positive values make it larger than the element; negative values shrink it.

What is an inset shadow?

An inset shadow appears inside the element rather than outside, creating a pressed or recessed effect.

Can I stack multiple shadows?

Yes — in your CSS you can comma-separate multiple box-shadow values. Use this tool to generate each one individually.

Related Tools