CSS Box Shadow Builder
Preview and generate a CSS shadow with blur, offset, spread and opacity.
Runs in your browser. Nothing you enter is sent to our servers.
Result
Enter your details and select Run tool.
How to use this tool
Adjust the horizontal and vertical offsets, blur radius, spread and opacity, then copy the generated box-shadow declaration. The preview shows the effect on a sample card. CSS values are validated before being applied.
Questions and answers
Can blur be negative?
No. CSS blur radius must be zero or greater, unlike shadow offsets or spread.
What is inset?
Inset places the shadow inside the box rather than outside it.