CSS Box Shadow Generator

Build a Box Shadow With a Live Preview

Offset X: 0px

Offset Y: 10px

Blur: 20px

Spread: 0px

Color

Opacity: 30%

Inset shadow

Generated CSS

Adjust the controls above to build a shadow

Error

Something went wrong.

Understanding CSS Box Shadows

Live Preview

Watch the shadow update instantly on a sample box as you adjust every slider.

Full Control

Adjust horizontal and vertical offset, blur radius, spread, color, and opacity independently.

Copy-Ready CSS

Copy the exact box-shadow declaration to paste directly into your stylesheet.

Local Processing

The preview and CSS are generated entirely in your browser — no data is ever sent to a server.

Outer vs. Inset Shadows

A regular box-shadow appears outside the element's border, creating a sense of depth or elevation. An inset shadow instead appears inside the element, creating a pressed-in or recessed look — useful for input fields or buttons that need to look concave rather than raised.

Key Takeaways

Five Adjustable Properties: Fine-tune offset, blur, spread, color, and opacity independently.
Inset Option: Toggle between an outer drop shadow and an inner recessed shadow.
Client-Side Only: All generation happens locally in your browser — no data is ever sent to a server.

CSS Box Shadow Generator - Free Online Tool