About the CSS Box Shadow Generator
The four lengths in box-shadow do different jobs and are easy to mix up. Offset X and Y move the shadow sideways and down, blur softens its edge over that many pixels, and spread inflates or deflates the shadow shape before the blur is applied. A small negative spread is the trick behind shadows that look tight against the element rather than puffed out around it, which is why it is the default here.
Colour matters more than the geometry. A shadow written as pure black at high opacity turns everything below it grey and muddy; a translucent dark blue such as rgba(15, 23, 42, 0.25) keeps the surface underneath looking clean. The field accepts hex, rgb(), rgba(), hsl() and named colours, and anything it cannot recognise is rejected with a message rather than silently ignored.
Ticking inset flips the shadow inward, which is how pressed buttons, inset wells and inner glows are made. Note that an inset shadow paints inside the padding box, so it sits above the background but below the content. Shadows are cheap to paint but not free, so avoid animating the blur radius on long lists; animate opacity on a second layer instead. The Border Radius Generator handles the corner shape the shadow follows.
How to use
- Set the X and Y offsets first to place the light source, then raise the blur until the edge looks right.
- Nudge spread negative to pull the shadow in, or positive to push it out past the element.
- Change the shadow colour to a translucent value, then copy the rule or download it as a .css file.
Common questions
- What is the difference between blur and spread?
- Spread resizes the shadow rectangle before it is drawn, so it changes how much shadow there is. Blur only softens the edge of whatever shape spread produced.
- How do I stack two shadows?
- Generate each one, then join the two values with a comma inside a single box-shadow declaration. The first value in the list is painted on top.
- Why is my inset shadow invisible?
- An inset shadow needs room inside the element. If the element has no padding and its background is covered by a child, the shadow is hidden behind that child.
- Does box-shadow affect layout?
- No. Shadows are painted outside the box model and never push neighbouring elements around, unlike a border or an outline with an offset.