How to use
- Adjust Horizontal offset, Vertical offset, Blur and Spread with the sliders or number fields.
- Choose Color and set Opacity while checking the live preview.
- Click + Add layer to stack another shadow (up to 4 layers), then adjust it the same way.
- Click Copy CSS for the full declaration, or Copy value for just the shadow value.
Examples
Two-layer card shadow
Input
Layer 1: Horizontal offset 0, Vertical offset 2, Blur 4, Spread -2, Color #000000, Opacity 0.1, Inset off Layer 2: Horizontal offset 0, Vertical offset 4, Blur 6, Spread -1, Color #000000, Opacity 0.1, Inset off
Output
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
Inner shadow for a pressed button
Input
Horizontal offset 0, Vertical offset 2, Blur 4, Spread 0, Color #000000, Opacity 0.25, Inset on
Output
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.25);
Hard offset shadow for a retro card
Input
Horizontal offset 6, Vertical offset 6, Blur 0, Spread 0, Color #2451E8, Opacity 1, Inset off
Output
box-shadow: 6px 6px 0 0 rgba(36, 81, 232, 1);
Tips
- Pick a shadow color with HTML Color Codes.
- Combine with a gradient background from the CSS Gradient Generator.
FAQ
What is the difference between Blur and Spread?
Blur softens the shadow’s edge; 0 gives a hard edge. Spread grows the shadow before blurring, while a negative value shrinks it.
How do I make a box shadow only on the bottom?
Start with Horizontal offset at 0, a positive Vertical offset and a negative Spread. Adjust Blur and Spread in the preview to reduce the shadow along the sides.
How many box-shadow layers can I stack?
You can use up to 4 layers. Layer 1 is drawn on top; use ↑ Move up or ↓ Move down to change the stacking order.
Which color formats can I enter?
Color accepts three- or six-digit hex, such as #333 or #2451E8, with or without the #. Use Opacity for transparency; hex with alpha, named colors and rgb()/hsl() input are not accepted.
Why aren't the preview colors and radius in the copied CSS?
Box color, Background and Radius change only the sample. The copied CSS contains the box-shadow declaration, not those preview settings.