CSS: “box-shadow”: X não é um valor “box-shadow” válido.

A propriedade box-shadow aplica um ou mais efeitos de sombra à caixa de um elemento. O validador CSS da W3C verifica que cada valor na declaração está em conformidade com a especificação. Quando encontra algo que não reconhece — como um número sem unidade (que não seja 0), uma palavra-chave mal escrita, ou valores organizados na ordem errada — reporta que o valor não é válido para box-shadow.

A sintaxe correta para um único valor box-shadow é:

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

• inset (opcional): Se presente, a sombra é desenhada dentro da borda do elemento.
• <offset-x> e <offset-y> (obrigatórios): Deslocamentos horizontal e vertical. Devem ser comprimentos CSS válidos com unidades (por exemplo, px, em, rem). O valor 0 é o único comprimento que não requer uma unidade.
• <blur-radius> (opcional): Deve ser um comprimento não negativo. Por defeito é 0.
• <spread-radius> (opcional): Pode ser positivo ou negativo. Por defeito é 0. Só pode incluir isto se também incluir <blur-radius>.
• <color> (opcional): Qualquer cor CSS válida. Pode aparecer no início ou no fim da lista de valores.

Causas comuns deste erro de validação incluem:

1. Unidades em falta nos valores de comprimento — Escrever 10 10 em vez de 10px 10px.
2. Palavras-chave inválidas ou mal escritas — Usar algo como outerbox ou shadows em vez de inset ou none.
3. Demasiados ou poucos valores — Fornecer cinco valores de comprimento quando o máximo é quatro.
4. Prefixos de fornecedor — Usar -webkit-box-shadow ou valores não padronizados que o validador padrão rejeita.
5. Valores de cor inválidos — Usar uma cor malformada como rgb(0,0,0,0.5) (falta o a em rgba para validação CSS3) ou um erro numa cor nomeada.
6. Ordem de valores incorreta — Colocar a cor entre os valores de comprimento em vez de no início ou no fim.

Corrigir este problema garante que o seu CSS está em conformidade com os padrões, o que melhora a consistência entre navegadores e reduz o risco de comportamento de renderização inesperado.

Exemplos

Unidades em falta nos valores de comprimento

Números sem unidade (exceto 0) não são comprimentos CSS válidos. Esta é uma das causas mais comuns deste erro.

<!-- ❌ Inválido: unidades em falta nos valores de deslocamento -->

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

<!-- ✅ Válido: todos os comprimentos têm unidades adequadas -->

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

Palavra-chave inválida

Apenas none e inset são palavras-chave válidas para box-shadow. Qualquer outra palavra-chave desencadeia o erro.

<!-- ❌ Inválido: "outset" não é uma palavra-chave reconhecida -->

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

<!-- ✅ Válido: usando a palavra-chave correta "inset" -->

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

Valor de cor na posição errada ou malformado

O valor de cor deve aparecer primeiro ou último na definição da sombra. Alguns validadores são rigorosos quanto à colocação, e uma cor malformada falhará sempre.

<!-- ❌ Inválido: cor colocada entre valores de comprimento -->

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

<!-- ✅ Válido: cor no fim -->

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

Usar zero sem unidades junto com outros valores

Embora 0 sozinho não necessite de uma unidade, misturá-lo na declaração é adequado — apenas certifique-se de que outros valores têm unidades adequadas.

<!-- ✅ Válido: 0 não precisa de uma unidade -->

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

Múltiplas sombras

Múltiplos valores de sombra são separados por vírgulas. Cada sombra individual deve seguir independentemente a sintaxe correta.

<!-- ✅ Válido: duas sombras adequadamente formatadas -->

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

Propriedade com prefixo de fornecedor

O validador W3C não reconhece propriedades com prefixos de fornecedor. Se precisar delas para suporte a navegadores legados, mantenha a propriedade padrão em conjunto.

<!-- ❌ Desencadeia um aviso ou erro no validador -->

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

<!-- ✅ Válido: use a propriedade padrão -->

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

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Iniciar teste gratuito Ver preços