Skip to main content

HTML Guide

CSS: “box-shadow”: X is not a “box-shadow” value.

The value provided for the box-shadow CSS property is invalid.

The box-shadow property requires a valid set of length, color, and optionally other parameters to describe shadow effects on elements. A typical box-shadow value must specify horizontal and vertical offsets, and may include blur radius, spread radius, and color, in that order. Syntax errors such as missing units, wrong order, or invalid keywords will trigger validation errors.

Correct syntax:

box-shadow: <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>?;
  • <offset-x> and <offset-y> are required and must use valid CSS length units (like px, em, rem).
  • <blur-radius>, <spread-radius>, and <color> are optional.
  • Multiple shadows can be comma-separated.

Example of invalid usage:

<div style="box-shadow: 10 10;">Invalid box-shadow</div>

In this example, the values 10 10 are missing units (px).

Example of a valid, W3C-compliant usage:

<div style="box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);">
  Valid box-shadow
</div>

Example with multiple shadows:

<div style="box-shadow: 2px 2px 5px #888, 0px 0px 10px 2px blue;">
  Multiple shadows example
</div>

Always ensure each length value has a correct unit, colors are valid, and values are in the correct order to pass validation.

Learn more:

Related W3C validator issues