HTML Guides for box-shadow

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>

The box-shadow property applies one or more shadow effects to an element. Its syntax accepts several values in a flexible order:

box-shadow: <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? inset?;

The <color> component is optional — if omitted, it defaults to currentcolor. However, when a color is provided, it must be a valid CSS color value. The validator raises this error when it encounters something in the color position that doesn’t match any recognized color format.

Common causes of this error include:

• Misspelled color names — e.g., greyy instead of grey, or balck instead of black.
• Invalid hex codes — e.g., #GGG or #12345 (hex codes must be 3, 4, 6, or 8 hex digits).
• Fabricated color names — e.g., banana or darkwhite, which are not part of the CSS named colors specification.
• Malformed function syntax — e.g., rgb(0,0,0,0.3) using the legacy comma syntax with four values instead of rgba(), or missing parentheses.
• Incorrect value order — placing values in an unexpected position can cause the validator to misinterpret a non-color value as a color attempt.

This matters for standards compliance because browsers may silently ignore an invalid box-shadow declaration entirely, meaning your intended shadow effect won’t render. Using valid CSS ensures consistent behavior across browsers and passes validation checks.

Recognized CSS color formats

The following formats are valid for the color component:

• Named colors: red, blue, transparent, currentcolor, etc.
• Hex codes: #000, #0000, #000000, #00000080
• RGB/RGBA: rgb(0, 0, 0), rgba(0, 0, 0, 0.5), or the modern rgb(0 0 0 / 50%)
• HSL/HSLA: hsl(0, 0%, 0%), hsla(0, 0%, 0%, 0.5), or hsl(0 0% 0% / 50%)

Examples

Incorrect — misspelled or invalid color values

<!-- "balck" is not a valid color name -->

<div style="box-shadow: 2px 4px 8px balck;">Typo in color</div>

<!-- "banana" is not a recognized CSS color -->

<div style="box-shadow: 2px 4px 8px banana;">Invalid color name</div>

<!-- "#12345" is not a valid hex code (5 digits) -->

<div style="box-shadow: 2px 4px 8px #12345;">Bad hex code</div>

Correct — valid color values

<!-- Named color -->

<div style="box-shadow: 2px 4px 8px black;">Named color</div>

<!-- Hex color -->

<div style="box-shadow: 2px 4px 8px #333;">Hex color</div>

<!-- RGBA for semi-transparency -->

<div style="box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);">Semi-transparent</div>

<!-- HSL color -->

<div style="box-shadow: 2px 4px 8px hsl(210, 50%, 40%);">HSL color</div>

Correct — omitting the color entirely

If you want the shadow to inherit the element’s text color, you can omit the color value altogether. This is valid and avoids the error:

<!-- Defaults to currentcolor -->

<div style="box-shadow: 2px 4px 8px;">Uses currentcolor</div>

Correct — multiple shadows with valid colors

<div style="box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), inset 0 0 6px #ccc;">
  Multiple shadows
</div>

To resolve this validation error, check the exact value the validator flags (the “X” in the error message), verify its spelling against the list of CSS named colors, and ensure any hex or function-based color uses correct syntax. If the color isn’t needed, simply remove it and let the browser default to currentcolor.