CSS Box Shadow Generator

Design, layer, and preview custom CSS box shadows.

Shadow Layers

Layer multiple shadows to construct realistic lighting depth.

Main Shadow

0px 8px 16px -4px

Ambient Occlusion

0px 2px 4px -2px

Properties: Main Shadow

Inset Shadow

Place the shadow inside the boundary box.

Offset X0px

Offset Y8px

Blur Radius16px

Spread Radius-4px

Shadow Color

Opacity15%

Quick Colors

Target Box Styling

Format the dimensions and details of the preview container.

Width180px

Height180px

Box BG Color

Border Radius16px

Border Width0px

Border Style

Border Color

Predefined Presets

One-click applications of popular layered shadows, borders, and styles.

Interactive Canvas

Drag box to adjust selected layer offset

Target Box

180x180

Generate Styles

CSS Code

box-shadow: 0px 8px 16px -4px rgba(0, 0, 0, 0.15),
  0px 2px 4px -2px rgba(0, 0, 0, 0.1);

Tailwind CSS Utility

shadow-[0px_8px_16px_-4px_rgba(0,0,0,0.15),0px_2px_4px_-2px_rgba(0,0,0,0.1)]