CSS LabCSS box-shadow generator
Soft modern shadows are usually two layers with low opacity. This tool starts there and lets you change every number.
The five numbers in a shadow
A box-shadow is written in this order: horizontal offset, vertical offset, blur, spread and colour, with the word inset in front if the shadow is inside the box.
- Horizontal and vertical offset. How far the shadow moves to the right and down. Negative numbers move it left and up. A small positive vertical offset and no horizontal offset looks like light from above.
- Blur. How soft the edge is. 0 is a sharp copy of the box. Larger numbers spread the shadow wider and make it fainter.
- Spread. Makes the shadow bigger (positive) or smaller (negative) than the box before blurring. A negative spread with a large blur gives the "floating card" look, because the shadow does not stick out at the sides.
- Colour and opacity. A shadow that is a dark tint of your page colour looks more natural than pure black. The opacity slider turns the colour into an
rgba()value.
Why two layers
The second layer in the preview is smaller and lighter than the first. Real shadows have a tight dark part near the object and a wide soft part further away, and stacking two shadows imitates that. The two layers are separated by a comma in the code. The first one is drawn on top.
Tips
- Keep the opacity low. 0.1 to 0.35 is usually enough on a light page.
- Do not animate
box-shadowon large lists, because it is redrawn on every frame. Fade the opacity of a pseudo-element that holds the shadow instead. - On dark backgrounds a shadow is nearly invisible. Use a lighter border or a subtle glow instead.
What does inset do?
It draws the shadow inside the edge of the box, which makes the box look pressed in, such as an input field.
How is this different from drop-shadow()?
box-shadow follows the rectangular (or rounded) box. The filter: drop-shadow() function follows the real shape of the picture, including transparent areas, but has no spread and no inset.
This is an independent site. It is not connected with the W3C, MDN, Google, Apple, Mozilla or Microsoft. Browser and product names belong to their owners.