CSS: “box-shadow”: X no es un valor válido para “box-shadow”.

La propiedad box-shadow aplica uno o más efectos de sombra a la caja de un elemento. El validador CSS del W3C verifica que cada valor en la declaración se ajuste a la especificación. Cuando encuentra algo que no reconoce — como un número sin unidades (distinto de 0), una palabra clave mal escrita, o valores organizados en orden incorrecto — informa que el valor no es válido para box-shadow.

La sintaxis correcta para un valor único de box-shadow es:

box-shadow: none | [inset? && <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>?]

• inset (opcional): Si está presente, la sombra se dibuja dentro del borde del elemento.
• <offset-x> y <offset-y> (obligatorios): Desplazamientos horizontal y vertical. Deben ser longitudes CSS válidas con unidades (ej., px, em, rem). El valor 0 es la única longitud que no requiere unidad.
• <blur-radius> (opcional): Debe ser una longitud no negativa. Por defecto es 0.
• <spread-radius> (opcional): Puede ser positivo o negativo. Por defecto es 0. Solo puedes incluir esto si también incluyes <blur-radius>.
• <color> (opcional): Cualquier color CSS válido. Puede aparecer al principio o al final de la lista de valores.

Las causas comunes de este error de validación incluyen:

1. Falta de unidades en valores de longitud — Escribir 10 10 en lugar de 10px 10px.
2. Palabras clave inválidas o mal escritas — Usar algo como outerbox o shadows en lugar de inset o none.
3. Demasiados o muy pocos valores — Proporcionar cinco valores de longitud cuando el máximo es cuatro.
4. Prefijos de proveedor — Usar -webkit-box-shadow o valores no estándar que el validador estándar rechaza.
5. Valores de color inválidos — Usar un color mal formado como rgb(0,0,0,0.5) (falta la a en rgba para validación CSS3) o un error tipográfico en un color con nombre.
6. Orden incorrecto de valores — Colocar el color entre los valores de longitud en lugar de al inicio o al final.

Corregir este problema asegura que tu CSS cumpla con los estándares, lo que mejora la consistencia entre navegadores y reduce el riesgo de comportamientos de renderizado inesperados.

Ejemplos

Falta de unidades en valores de longitud

Los números sin unidades (excepto 0) no son longitudes CSS válidas. Esta es una de las causas más comunes de este error.

<!-- ❌ Inválido: falta de unidades en valores de desplazamiento -->

<div style="box-shadow: 10 10 5 rgba(0,0,0,0.5);">
  Texto con sombra
</div>

<!-- ✅ Válido: todas las longitudes tienen unidades adecuadas -->

<div style="box-shadow: 10px 10px 5px rgba(0,0,0,0.5);">
  Texto con sombra
</div>

Palabra clave inválida

Solo none e inset son palabras clave válidas para box-shadow. Cualquier otra palabra clave desencadena el error.

<!-- ❌ Inválido: "outset" no es una palabra clave reconocida -->

<div style="box-shadow: outset 4px 4px 8px #333;">
  Texto con sombra
</div>

<!-- ✅ Válido: usando la palabra clave correcta "inset" -->

<div style="box-shadow: inset 4px 4px 8px #333;">
  Texto con sombra
</div>

Valor de color en posición incorrecta o mal formado

El valor de color debe aparecer al principio o al final en la definición de la sombra. Algunos validadores son estrictos sobre la posición, y un color mal formado siempre fallará.

<!-- ❌ Inválido: color colocado entre valores de longitud -->

<div style="box-shadow: 2px red 2px 5px;">
  Texto con sombra
</div>

<!-- ✅ Válido: color al final -->

<div style="box-shadow: 2px 2px 5px red;">
  Texto con sombra
</div>

Usando cero sin unidades junto con otros valores

Aunque 0 solo no requiere unidad, mezclarlo en la declaración está bien — solo asegúrate de que otros valores tengan unidades adecuadas.

<!-- ✅ Válido: 0 no necesita unidad -->

<div style="box-shadow: 0 0 10px 2px rgba(0,0,0,0.75);">
  Texto con sombra
</div>

Múltiples sombras

Múltiples valores de sombra se separan por comas. Cada sombra individual debe seguir independientemente la sintaxis correcta.

<!-- ✅ Válido: dos sombras correctamente formateadas -->

<div style="box-shadow: 2px 2px 5px #888, inset 0 0 10px 2px blue;">
  Múltiples sombras
</div>

Propiedad con prefijo de proveedor

El validador del W3C no reconoce propiedades con prefijos de proveedor. Si las necesitas para soporte de navegadores legacy, mantén la propiedad estándar al lado.

<!-- ❌ Desencadena una advertencia o error en el validador -->

<div style="-webkit-box-shadow: 3px 3px 6px #000;">
  Texto con sombra
</div>

<!-- ✅ Válido: usa la propiedad estándar -->

<div style="box-shadow: 3px 3px 6px #000;">
  Texto con sombra
</div>

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Iniciar prueba gratuita Ver precios