Creator

CSS Box Shadow Generator

Create perfect CSS box shadows visually. Control horizontal and vertical offset, blur, spread, shadow color and opacity, and toggle inset shadows — all with a live card preview and instantly copyable CSS.

Examples

Input

X 0, Y 8, blur 24, spread 0

Output

box-shadow: 0px 8px 24px 0px rgba(91, 108, 255, 0.25);

How to use CSS Box Shadow Generator

Set the offsets

Use the X and Y sliders to position the shadow, then tune blur and spread.

Pick color and opacity

Choose a shadow color and adjust opacity for the right intensity.

Copy the CSS

Toggle inset if needed, then copy the generated box-shadow rule.

Why use this tool

Live card preview

Adjustable opacity via RGBA

Inset shadow toggle

Copyable CSS output

Frequently asked questions

Can I create inset shadows?

Yes, enable the Inset shadow toggle to render the shadow inside the element.

How is opacity applied?

The chosen hex color is converted to RGBA using the opacity slider value.

Discussion

Share feedback or ask a question about this tool.

Comments are stored to a moderated queue via the API.