Box Shadow Generator — Free Online Tool

Live CSS box-shadow preview.. Box Shadow Generator is a free online tool from the ToolsRift Developer Tools collection. It runs entirely in your browser — nothing to install, no signup, and your data never leaves your device.

Loading Box Shadow Generator

How to use Box Shadow Generator

Adjust horizontal and vertical offset, blur, spread, color and the inset toggle, then copy the generated box-shadow CSS while watching the preview update live.

Frequently asked questions

What do the box-shadow values mean?

In order: horizontal offset, vertical offset, blur radius, spread radius, and color — with an optional inset keyword for inner shadows.

What does inset do?

inset draws the shadow inside the element's border instead of outside, creating a pressed or recessed appearance.

Can I stack multiple shadows?

Yes — CSS allows comma-separated box-shadow layers, letting you combine several offsets and colors for realistic depth.

More Developer Tools

Text Shadow Generator
Live CSS text-shadow preview.
Border Radius Generator
Independent corner radius controls.
Flexbox Generator
Visual flex layout + CSS code.
Grid Generator
Visual grid layout + CSS code.
Animation Generator
Generate keyframes with preview.
Meta Tags Advanced
SEO + OG + Twitter meta generator.

← View all Developer Tools