Box Shadow
Layered CSS shadows with live preview.
box-shadow: 0px 10px 30px 0px #7aa2ff66;
About the Box Shadow
Create CSS box shadows visually with support for up to four stacked layers, inset shadows, and a live preview card. Adjust offsets, blur, spread and color per layer, then copy the finished box-shadow declaration for your stylesheet.
How to use the Box Shadow
- Adjust the offset X, offset Y, blur and spread sliders for the first layer.
- Pick a shadow color โ include an alpha value by appending hex digits, or lower opacity through the color choice.
- Toggle "Inset" for inner shadows, or add more layers for realistic depth.
- Copy the generated box-shadow CSS from the output panel.
Box Shadow FAQ
How do layered shadows work?
Multiple shadows are comma-separated in one box-shadow declaration and are painted first-to-last. Layering a tight dark shadow under a wide soft one is a common trick for natural-looking depth.
What does the spread value do?
Spread grows or shrinks the shadow before blurring. Positive spread makes the shadow larger than the element, negative spread contracts it โ useful for ring-like effects with blur 0.
Can I create an inset shadow?
Yes โ tick "Inset" on a layer and the shadow is drawn inside the element instead of outside, like the inner edge of a pressed button.