TOOL · 83 · Data & Utility

CSS Box Shadow Generator

Craft a CSS box-shadow with offset, blur, spread, color, opacity and inset — copy the exact CSS.

Processed 100% in your browser — your files never leave your device.

Offset X (0px)

Offset Y (10px)

Blur (25px)

Spread (-5px)

Shadow color

Opacity (20%)

Inset shadow

box-shadow: 0px 10px 25px -5px rgba(15, 23, 42, 0.20);

How it works

Step · 01
Drag the sliders to shape a CSS box-shadow — offset, blur, spread, color and opacity.
Step · 02
Toggle inset for inner shadows. The preview updates live as you tweak.
Step · 03
Copy the generated CSS and paste it into your stylesheet.

Is this tool really free?: Yes. Every tool on EasyFileMagic is 100% free with no signup, no watermarks, no page limits, and no software to install.
Are my files uploaded to a server?: No. Files are processed directly in your browser using JavaScript and WebAssembly. Nothing is uploaded to our servers, so your documents never leave your device.
Does it work on mobile?: Yes. The tools run in any modern browser on desktop, tablet, or mobile (Chrome, Edge, Safari, Firefox). Very large files may be slower on low-end phones.