Box Shadow Generator

Create custom box shadows with live preview and instant CSS code generation.

Preview

Generated Code

/* Box Shadow */
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);

/* Multiple shadows example */
box-shadow: 
  0px 8px 16px 0px rgba(0, 0, 0, 0.1),
  0 0 0 1px rgba(0, 0, 0, 0.05);

/* Tailwind-style layered shadow */
box-shadow: 
  0 1px 3px 0 rgba(0, 0, 0, 0.1),
  0 1px 2px -1px rgba(0, 0, 0, 0.1);

Shadow Properties

Adjust the values to customize your box shadow

Horizontal Offset: 0px

Vertical Offset: 8px

Blur Radius: 16px

Spread Radius: 0px

Opacity: 0.10

Shadow Color

Inset Shadow

Shadow Presets

Click on a preset to apply it