HTML Guides for box-shadow

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.

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.