CSS Box Shadow Generator

Create beautiful box shadows with multiple layers.
Customize offset, blur, spread, color, and opacity.

Shadow Layers

Offset X0px

Offset Y10px

Blur15px

Spread-3px

Color

Opacity10%

Inset (inner shadow)

Border Radius12px

CSS Code

box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
    0px 4px 6px -4px rgba(0, 0, 0, 0.1);
border-radius: 12px;

Need shadows from real sites instead?

Frontend Hero's CSS Scanner lets you extract any box shadow from any website in 2 clicks. See how Stripe, Linear, and Vercel build their shadows.

Get Frontend Hero now →

Create grid layouts visually

Create flex layouts visually

Create custom gradients

Gradient text effects

275+ ready-to-use gradients

Style text highlight colors

Style custom scrollbars

Mix colors with blend modes

Preview all cursor styles

Create loading animations

Design buttons with hover effects

Create neon glow effects

Scale text across screen sizes