Skip to main content

HTML Guide

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.

Learn more:

Related W3C validator issues