0xdump

CSS Tools

Box Shadow Generator

Tune offset, blur, spread, and inset values for cleaner elevation.

Live tool

Tune the shadow

Preview

Shadow sample

Use this for cards, dialogs, floating buttons, or inset surface effects.

Generated CSS

Ready to paste

box-shadow: 0px 16px 40px -18px rgba(2, 6, 23, 0.28);

What this tool does

It gives you live control over the values that make CSS shadows feel clean or muddy.

Instead of trial-and-error editing in the browser, the tool lets you tune offset, blur, spread, opacity, and inset state in one place. The preview updates immediately and the output stays copy-ready.

How to use

A practical path from preset to production CSS.

  1. Pick the preset that is closest to your target surface.
  2. Adjust X and Y offsets to control the shadow direction.
  3. Increase blur for softer elevation and spread for broader coverage.
  4. Use opacity and color to control intensity without making the shadow heavy.
  5. Toggle inset when you want a recessed rather than elevated surface.

Example shadow presets

Starting points for common interface surfaces.

Soft card shadow

Light elevation for cards, pricing blocks, and content panels.

Strong modal shadow

Higher contrast depth for dialogs and layered overlays.

Inner shadow

Inset treatment for depressed controls and surface wells.

Floating button

Compact but readable lift for buttons and small chips.

FAQ

Common shadow questions that come up in UI work.

What usually makes a shadow look cheap?

Too much opacity and too little blur. Heavy black shadows with hard edges tend to feel dated quickly.

When should I use inset shadows?

Inset shadows work well for inputs, wells, and any element that should feel pressed into the surface rather than floating above it.

Do I always need spread radius?

No. Spread is useful, but many modern interface shadows look cleaner with negative spread values and more blur instead.

Related Tools

Keep exploring

Gradient Generator

Live

Build linear, radial, and conic gradients with live CSS output.

Open tool

Border Radius Generator

Live

Shape corners visually and export precise border-radius values.

Open tool

Glassmorphism Generator

Live

Create frosted-glass card styles with blur, border, and shadow controls.

Open tool