Box Shadow Generator

Design pixel-perfect CSS box shadows with real-time preview, multiple layers, and one-click code copying

Layer 1
0px
4px
6px
-1px
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);

How to Use This Tool

1

Adjust the shadow controls: X offset, Y offset, blur radius, and spread.

2

Set the shadow color and opacity using the color picker and slider.

3

Toggle "Inset" for an inner shadow. Add multiple layers for complex effects.

4

Try a preset (Subtle, Medium, Heavy, Floating, Pressed) to get started. Copy the CSS when done.

About This Tool

Box Shadow Generator is a visual CSS box-shadow builder with real-time preview. Design single or multi-layered shadows using intuitive sliders for offset, blur, spread, color, and opacity. Add multiple shadow layers for depth, toggle inset for inner shadows, and use built-in presets for common styles. Generates clean, production-ready CSS.

Share This Tool

Twitter

Related Tools

Back to Generators