The box-shadow shorthand sets one or more shadows on the element box. Each shadow has: color (optional), horizontal offset, vertical offset, blur radius (optional), spread radius (optional), and inset (optional, inner shadow). Multiple shadows are separated by commas..card {
box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
}.card {
box-shadow:
0 1px 3px rgb(0 0 0 / 0.12),
0 10px 20px rgb(0 0 0 / 0.08),
inset 0 0 0 1px rgb(255 255 255 / 0.3);
}min:-9999max:9999step:1units:px | em | rem | pt | vw | vh | vmin | vmaxcurrentColorCurrent color value (default for shadows).transparentTransparent color.insetInner shadow instead of outer.noneNo shadow (property initial value).rgb()RGB color function.hsl()HSL color function.hwb()HWB color function.lab()CIE Lab color function.lch()CIE LCH color function.oklab()Oklab color function.oklch()Oklch color function.color()Generic color function for custom color spaces.light-dark()Selects between two color values per color-scheme.CSS Borders Module Level 4Working Draft<color> <length>W3CMDNCSSShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationvalue typessourcesvisual demonstrationpreviousnext
