Box Shadow Wizard

Box Shadow Wizard

Choose from one of the gorgeous box-shadow examples and make live modifications to the style. Check back as we will be adding more curated styles regularly.

Step 1: Choose a Box Shadow Base Style


Step 2: Fine-Tune the Box-Shadow

The Box Shadow :

Opacity:
No Value Selected
Box Color:
No Value Selected
Shadow Color:
No Value Selected

Your Settings :

Shadow Color
Base color of the drop shadow
Background Color
Base background
Opacity
Start Shadow Opacity

Radius
Corner Radius Value
Individual Corner Radius
Change one corner radius seperate from the others.

Generated CSS Box Shadow Code :

Make modifications or choose a box-shadow style and the CSS code will appear here.