Box Shadow Generator
Fine-tune shadows to add depth and elevation to your UI elements.
10px
10px
20px
0px
20%
box-shadow: 10px 10px
20px 0px rgba(0,0,0,0.2);
Understanding Box Shadows
The `box-shadow` property attaches one or more shadows to an element. It is crucial for creating depth in Material Design and other modern design languages.
Outset (Default)
The shadow is cast outside the border, making the element appear raised.
Inset
The shadow is cast inside the border, making the element appear pressed in.