HTML Guide for box-shadow

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.

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

The value interpreted as a color in the box-shadow CSS property is invalid.

box-shadow is used to apply shadow effects to elements. Its syntax includes horizontal and vertical offsets, blur and spread radii, and a color value. If the color value is invalid, the validator will report an error like “X is not a ‘color’ value”.

Valid box-shadow syntax:

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

<color> is optional but highly recommended; if omitted, it defaults to currentcolor.
Valid color values include names (e.g., red), hexadecimal codes (e.g., #000), RGB/RGBA, HSL/HSLA formats.

Example of incorrect CSS (missing or invalid color):

<div style="box-shadow: 2px 4px 8px;">Shadow without color</div>
<div style="box-shadow: 2px 4px 8px banana;">Shadow with invalid color</div>

Example of correct HTML with valid box-shadow color values:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Box Shadow Example</title>
    <style>
      .shadow {
        box-shadow: 2px 4px 8px #000;    /* Black shadow */
      }
      .shadow2 {
        box-shadow: 2px 4px 8px rgba(0,0,0,0.3); /* Semi-transparent */
      }
      .shadow3 {
        box-shadow: 2px 4px 8px blue;    /* Named color */
      }
    </style>
  </head>
  <body>
    <div class="shadow">Box with shadow</div>
    <div class="shadow2">Box with semi-transparent shadow</div>
    <div class="shadow3">Box with blue shadow</div>
  </body>
</html>

Always specify a valid color value in box-shadow to resolve this validation issue.