Box Shadow Generator

Design CSS box shadows visually with a live preview. Copy the code.

Horizontal Offset5px

-5050

Vertical Offset5px

-5050

Blur Radius15px

0100

Spread Radius0px

-5050

Shadow Color

#000000

Opacity0.30

Inset Shadow

Live Preview

Preview Box

CSS Code

box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.3);

Quick Presets

About Box Shadow Generator

Free CSS box shadow generator with an interactive visual editor. Adjust horizontal offset, vertical offset, blur radius, spread radius, color, and opacity using intuitive sliders with a live preview. Add multiple shadow layers for complex effects, toggle inset shadows, and copy the generated CSS code instantly. Essential for front-end developers and designers creating depth, elevation, and neumorphism effects in modern web interfaces.

Frequently Asked Questions

Can I add multiple shadows to one element?▾

Yes. The tool lets you add multiple shadow layers, each with independent settings. Multiple shadows are combined in the generated CSS using comma-separated values, allowing you to create complex depth and lighting effects.

What is an inset shadow?▾

An inset shadow appears inside the element rather than outside, creating a pressed-in or recessed effect. Toggle the inset option to switch between outer shadows (elevation) and inner shadows (depth).