absurdtools

Box Shadow Generator

Create CSS box-shadow effects visually with a live preview and copyable code.

How to use

  1. Adjust the horizontal and vertical offset, blur, spread, and color.
  2. Toggle inset for an inner shadow and watch the live preview.
  3. Copy the box-shadow CSS.

Frequently asked questions

What do the box-shadow values mean?

They are horizontal offset, vertical offset, blur radius, spread radius, and color. "inset" draws the shadow inside the element instead of outside.

Can I stack multiple shadows?

Yes — CSS allows comma-separated shadows. This tool generates one; combine several by joining the copied values with commas.

🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.

Related tools

CSS Gradient Generator

Design linear and radial CSS gradients visually and copy the ready-to-use CSS.

Text Shadow Generator

Design CSS text-shadow effects visually with a live preview and copyable code.

Border Radius Generator

Round element corners visually and copy the CSS border-radius, including fancy blob shapes.

Color Contrast Checker

Check the contrast ratio between two colors against WCAG accessibility standards.