About

The box-shadow CSS property allows developers to add depth and dimension to HTML elements. While simple shadows are easy to write, complex, layered shadows (used in Neumorphism or Material Design) require precise tuning of multiple values. This tool visualizes these changes instantly, allowing for the stacking of multiple shadow layers to create realistic lighting effects.

Formulas

The CSS syntax generated follows this structure:

Layering: box-shadow: Layer1, Layer2, ...;
Values: offset-x offset-y blur-radius spread-radius color

Example: 10px 10px 20px -5px rgba(0,0,0,0.5)

Reference Data

Property	Description	Effect
Offset-X	Horizontal position	Positive moves right, negative moves left.
Blur Radius	Softness of edge	0 is sharp; higher values diffuse the shadow.
Spread	Size scaling	Positive expands, negative shrinks the shadow.

Frequently Asked Questions

Use the 'Inset' toggle. This changes the shadow from a drop-shadow (outer) to an inner-shadow, often used for input fields or pressed button states.

Single shadows often look artificial. Layering a tight, dark shadow with a larger, lighter diffuse shadow creates a much more photorealistic sense of elevation (Ambient Occlusion).