Designer

BOX SHADOW GENERATOR

Visually construct layered CSS box-shadow effects with real-time target element rendering.

Box Shadow Target

Shadow Parameters

Horizontal Offset (X)0px
Vertical Offset (Y)10px
Blur Radius25px
Spread Radius-5px
Shadow Opacity15%
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.15);

HOW TO USE BOX SHADOW

01

Step 1

Adjust horizontal (X), vertical (Y) offset, blur, and spread sliders.

02

Step 2

Pick shadow color and opacity percentage.

03

Step 3

Toggle inset shadow and copy generated CSS rule.

FREQUENTLY ASKED QUESTIONS

What is the difference between blur and spread?

Blur radius softens shadow edges. Spread radius expands or contracts overall shadow dimensions.

RELATED TOOLS

Explore All

Gradient Generator

Create CSS gradients.

Border Radius Generator

Custom CSS corner curves.