💡

Instructions: How to Use?

1.
Adjust the Horizontal and Vertical sliders to move the shadow.
2.
Use Blur Radius to soften the edges and Spread Radius to resize the shadow.
3.
Pick a Shadow Color and adjust its opacity for realistic effects.
4.
Toggle Inset to make the shadow appear inside the box.
5.
Click 'Copy CSS' to copy the generated code to your clipboard.

CSS Box Shadow Generator

Create beautiful, soft box-shadows and get the CSS instantly.

Horizontal Length 10px

Vertical Length 10px

Blur Radius 20px

Spread Radius 0px

Shadow Opacity 0.25

Shadow Color

#000000

Box Color

#4f46e5

Inset Shadow

Preview

CSS Code

box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.25);

Copied!