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

The box-shadow property applies one or more shadow effects to an element’s box. The W3C CSS validator checks that each value in the declaration conforms to the specification. When it encounters something it doesn’t recognize — such as a unitless number (other than 0), a misspelled keyword, or values arranged in the wrong order — it reports that the value is not valid for box-shadow.

The correct syntax for a single box-shadow value is:

box-shadow: none | [inset? && <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>?]

• inset (optional): If present, the shadow is drawn inside the element’s border.
• <offset-x> and <offset-y> (required): Horizontal and vertical offsets. Must be valid CSS lengths with units (e.g., px, em, rem). The value 0 is the only length that doesn’t require a unit.
• <blur-radius> (optional): Must be a non-negative length. Defaults to 0.
• <spread-radius> (optional): Can be positive or negative. Defaults to 0. You can only include this if you also include <blur-radius>.
• <color> (optional): Any valid CSS color. Can appear at the beginning or end of the value list.

Common causes of this validation error include:

1. Missing units on length values — Writing 10 10 instead of 10px 10px.
2. Invalid or misspelled keywords — Using something like outerbox or shadows instead of inset or none.
3. Too many or too few values — Providing five length values when the maximum is four.
4. Vendor prefixes — Using -webkit-box-shadow or non-standard values that the standard validator rejects.
5. Invalid color values — Using a malformed color like rgb(0,0,0,0.5) (missing the a in rgba for CSS3 validation) or a typo in a named color.
6. Incorrect value order — Placing the color between the length values instead of at the start or end.

Fixing this issue ensures your CSS is standards-compliant, which improves cross-browser consistency and reduces the risk of unexpected rendering behavior.

Examples

Missing units on length values

Unitless numbers (except 0) are not valid CSS lengths. This is one of the most common triggers for this error.

<!-- ❌ Invalid: missing units on offset values -->

<div style="box-shadow: 10 10 5 rgba(0,0,0,0.5);">
  Shadow text
</div>

<!-- ✅ Valid: all lengths have proper units -->

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

Invalid keyword

Only none and inset are valid keywords for box-shadow. Any other keyword triggers the error.

<!-- ❌ Invalid: "outset" is not a recognized keyword -->

<div style="box-shadow: outset 4px 4px 8px #333;">
  Shadow text
</div>

<!-- ✅ Valid: using the correct "inset" keyword -->

<div style="box-shadow: inset 4px 4px 8px #333;">
  Shadow text
</div>

Color value in the wrong position or malformed

The color value should appear either first or last in the shadow definition. Some validators are strict about placement, and a malformed color will always fail.

<!-- ❌ Invalid: color placed between length values -->

<div style="box-shadow: 2px red 2px 5px;">
  Shadow text
</div>

<!-- ✅ Valid: color at the end -->

<div style="box-shadow: 2px 2px 5px red;">
  Shadow text
</div>

Using zero without units alongside other values

While 0 alone doesn’t require a unit, mixing it into the declaration is fine — just make sure other values have proper units.

<!-- ✅ Valid: 0 doesn't need a unit -->

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

Multiple shadows

Multiple shadow values are separated by commas. Each individual shadow must independently follow the correct syntax.

<!-- ✅ Valid: two properly formatted shadows -->

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

Vendor-prefixed property

The W3C validator does not recognize vendor-prefixed properties. If you need them for legacy browser support, keep the standard property alongside.

<!-- ❌ Triggers a warning or error in the validator -->

<div style="-webkit-box-shadow: 3px 3px 6px #000;">
  Shadow text
</div>

<!-- ✅ Valid: use the standard property -->

<div style="box-shadow: 3px 3px 6px #000;">
  Shadow text
</div>

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing