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

About This HTML Issue

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.

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

Learn more:

MDN Reference

MDN Web Docs: box-shadow

→

Help us improve our guides

Was this guide helpful?