CSS Box Shadow Generator

Create beautiful CSS box shadows with live preview. Customize multiple layers, adjust opacity, and generate copy-ready CSS code for your web projects.

Live Preview

Element Properties

Width: 200px

Height: 100px

Background Color

Border Radius: 8px

Generated CSS

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

Shadow Presets

Quick start with common shadow styles

Shadow Layers (1/5)

Layer 1

Shadow Properties

Editing Layer 1

Horizontal: 0px

Vertical: 4px

Blur: 6px

Spread: -1px

Shadow Color

Opacity: 10%

Inset Shadow

CSS Box Shadow Generator

Live Preview

Element Properties

Generated CSSCopy

Shadow Presets

Shadow Layers (1/5)Add Layer

Shadow Properties

Frequently Asked Questions

What's the difference between inset and regular shadows?

How do multiple shadow layers work?

What do the spread and blur values control?

Can I use these shadows on any CSS element?

How do I optimize shadows for performance?

Generated CSS

Shadow Layers (1/5)