CSS Box Shadow Generator

Design CSS box shadows visually with controls for offset, blur, spread, color, and inset. Copy CSS code instantly.

Presets

Shadow Layers

Horizontal Offset5px

Vertical Offset5px

Blur Radius15px

Spread Radius0px

Shadow Color

Opacity0.30

Inset Shadow

CSS Output

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

What is CSS Box Shadow Generator?

The CSS box-shadow property adds shadow effects around elements. This visual generator lets you adjust offset, blur, spread, color, and inset with real-time preview.

𝕏 Twitter in LinkedIn

Vurder dette verktøyet

4.8 / 5 · 203 vurderinger

More Tools

🌈CSS Gradient Generator 🎨Color Converter { }CSS Minifier / Beautifier TWCSS til Tailwind

Hold deg oppdatert

Få ukentlige dev-tips og nye verktøy.

Ingen spam. Avslutt når som helst.

Enjoy these free tools?

☕Buy Me a Coffee

How to Use

Adjust shadow offset
Set blur and spread radius
Choose shadow color
Toggle inset for inner shadows
Copy the CSS code

Use Cases

Card elevation effects
Button hover states
Modal shadows
Navigation bar shadows

FAQ

What is CSS box-shadow?

box-shadow adds shadow effects around an element's frame with offset, blur, spread, and color values.

Can I add multiple shadows?

Yes, CSS supports multiple box shadows. This tool lets you add up to 4 layers.

What is inset shadow?

An inset shadow appears inside the element, creating a pressed effect.