CSS toolsBox shadow generator
CSS Box Shadow Generator
Move the sliders and this CSS box shadow generator redraws the shadow and rewrites the box-shadow line at once. It covers both offsets, the blur and spread radius, the colour with its opacity, and inset shadows for pressed buttons and wells.
How to use the box shadow generator
Push the shadow away from the box with the two offsets. Positive values move it right and down.
Raise the blur to soften the edge, and use a negative spread to tuck the shadow back under the box.
Pick the colour and lower the opacity. Most good shadows sit between 10% and 35%.
Tick Inset for a shadow inside the box, then copy the line into your CSS.
What the box-shadow values mean
The CSS box-shadow property takes up to four lengths, a colour and the optional word inset, in this order: box-shadow: x y blur spread colour.
The horizontal and vertical offsets move the shadow; with both at zero it sits right behind the box and only shows where blur or spread push it out. The blur radius sets how soft the edge is and cannot be negative. The spread radius grows the shadow before it is blurred, or shrinks it when negative, which is how you get a shadow that only shows below an element. The colour works best with an alpha value: the generator writes rgba() as soon as the opacity is under 100%.
An inset shadow is drawn inside the border instead of outside, so the box looks pressed in. Input fields, toggles and pressed button states often use one.
CSS box shadows that look real
Real light rarely throws a pure black, hard shadow. Tint the colour towards the background (a dark blue-grey on a light blue page), keep the opacity low and let the vertical offset be larger than the horizontal one, as if the light came from above.
Elevation reads best as a pair: a small, sharp shadow close to the box plus a large, faint one further away. Copy this generator's output twice, change the second set of values, and join the two with a comma. Bigger blur and offset mean the element floats higher, which suits a menu or a dialog more than a card in a list.
Questions
- Can an element have more than one box shadow?
- Yes. Separate the shadows with commas in one box-shadow rule; the first one is drawn on top. Two or three soft layers with growing blur look more natural than one big shadow.
- Why is my box shadow cut off?
- A parent with overflow: hidden (or auto) clips everything outside its box, shadows included. Give the parent some padding, or move overflow: hidden to an element that does not need the shadow.
- Does box-shadow follow rounded corners?
- Yes. The shadow takes the shape of the border-radius of the element. It does not follow transparent parts of an image; for that, use filter: drop-shadow() instead.
- Do box shadows slow a page down?
- A few static shadows cost almost nothing. Animating a large blur on many elements can make scrolling stutter; animate the opacity of a pseudo-element that holds the shadow instead.