CSS Box Shadow Generator
Move the sliders until the shadow looks right, then copy the box-shadow line. The preview shows the exact result.
CSS
box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.35);
About this tool
box-shadow takes four lengths: horizontal offset, vertical offset, blur radius and spread. Blur softens the edge, spread grows or shrinks the shadow before blurring, and a negative spread with a positive Y offset gives the subtle lift most design systems use.
Adding the inset keyword draws the shadow inside the box instead of behind it, which is how pressed buttons and inner wells are made. The colour is usually black at low opacity rather than grey, because a translucent shadow keeps its relationship with whatever sits behind it.
Frequently asked questions
- Why does my shadow look grey and flat?
- Solid grey ignores the background. Use black with 20-40% opacity and a small negative spread instead.
- Can I stack more than one shadow?
- Yes. Separate the values with commas in your stylesheet — generate each layer here and join them.
- Does box-shadow affect layout?
- No. It paints outside the border box and never changes element size or position, unlike a border.