CSS Box Shadow Generator

Design box shadows visually and copy the CSS. Free, private and instant.

About the CSS Box Shadow Generator

The CSS box-shadow property adds depth by drawing a blurred shadow behind an element. Offsets set direction and blur sets softness.

When to use it

Use it to lift cards and buttons off the page. Subtle, large-blur shadows usually look more natural than hard dark ones.

The values

box-shadow takes an x offset, a y offset, a blur radius, an optional spread and a color. A positive y moves the shadow down, a larger blur makes it softer, and spread grows or shrinks it.

Natural-looking shadows

Real shadows are soft and subtle. Use a low-opacity color, a modest y offset and a large blur. Stacking two shadows, one tight and one wide, often looks more realistic than one.

Dark backgrounds

On black or very dark pages, dark shadows are invisible. Use a lighter glow or a subtle border to separate elements instead.

Accessibility

Never rely on a shadow alone to show focus or state. Combine it with an outline or color change so everyone can perceive it.

How to use the CSS Box Shadow Generator

1. Enter or paste your input in the fields above.
2. The result updates as you type, or press Run.
3. Press Copy to copy the output.

Frequently asked questions

Is the CSS Box Shadow Generator free?

Yes. It is completely free, with no signup and no usage limits.

Is my data uploaded anywhere?

No. Everything runs locally in your browser, so what you type never leaves your device.

Does the CSS Box Shadow Generator work on mobile?

Yes. The tool is responsive and works on phones, tablets and desktops.

More free tools