CSS Box Shadow Generator

Visually build and preview advanced CSS box shadows.

Settings

Horizontal 0px

Vertical 10px

Blur 20px

Spread 0px

Shadow Color

Opacity 0.25

CSS Output

How to use the Box Shadow Generator

Adjust the sliders to move the shadow along the X and Y axes, and tweak the blur and spread radiuses. The generated CSS rule updates immediately. Copy the code into your stylesheets to apply the exact shadow you built visually.

Why use a visual shadow builder?

Writing `box-shadow` rules by hand is notoriously unintuitive because it requires visualizing the interaction of 4 separate dimensional values and an alpha-transparency hex code. This tool translates visual design directly into browser-ready code.