Box Shadow Generator

Design smooth CSS box shadows with a live preview.

Free Design

Offset X (px)

Offset Y (px)

Blur (px)

Spread (px)

Shadow colour

Opacity %

Your result will appear here.

FAQ & guide

How to use this tool

How do I use the Box Shadow Generator?

Fill in the fields — the result updates automatically as you type. You can also click “Run tool”, then copy or download the result.

Is my data stored by Growteches?

No. This tool runs entirely in your browser. What you type is not sent to or stored on our servers.

Is it free to use for commercial work?

Yes. All Growteches tools are free to use for personal and commercial projects, with no sign-up.

More tools

All tools

Convert colours between HEX, RGB and HSL.

Check text/background contrast against WCAG AA and AAA.

Create linear and radial gradients and copy the CSS.

Generate tints, shades and harmonious palettes from one colour.

Free consultation

Tell us where you want to be in 12 months. We will review your website and marketing and come back with a free, no-obligation audit and plan.

kumar@growteches.com

Thanks — the Growteches team will get back to you within 24 hours.