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

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-box-shadow-x-is-not-a-color-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<!-- "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

```html
<!-- 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:

```html
<!-- Defaults to currentcolor -->
<div style="box-shadow: 2px 4px 8px;">Uses currentcolor</div>
```

### Correct — multiple shadows with valid colors

```html
<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](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color), 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`.