Como gerar código CSS box-shadow

Introduza os valores da sombra, escolha a cor e ative inset se quiser uma sombra interior. O gerador produz uma declaração CSS box-shadow com os valores fornecidos e as unidades px nos campos numéricos.

Para que serve o gerador de box-shadow

O gerador serve para preparar uma declaração CSS box-shadow sem escrever manualmente os quatro valores da sombra. Pode ajustar o deslocamento horizontal e vertical, o desfoque, a expansão, a cor e a opção de sombra interior (inset), consoante o efeito que pretende aplicar a um elemento.

É útil para experimentar combinações de sombra e obter uma declaração pronta a copiar para a sua folha de estilos. Os controlos aceitam valores opcionais; quando não os altera, os valores predefinidos são 2 para os dois deslocamentos, 5 para o desfoque, 0 para a expansão, #00000033 para a cor e a opção interior desativada.

Como gerar a declaração CSS

1. Abra o gerador e localize os controlos de deslocamento horizontal, deslocamento vertical, desfoque, expansão, cor e sombra interior. Os quatro primeiros recebem valores numéricos, a cor é introduzida num campo de texto e inset é controlado por uma caixa de seleção.

2. Introduza os valores que quer usar. Por exemplo, para uma sombra interior suave, indique 0 no deslocamento horizontal, 0 no deslocamento vertical, 8 no desfoque e 0 na expansão. No campo de cor, escreva #00000033 e ative a opção inset. O caso verificado aceita zero nos dois deslocamentos, no desfoque e na expansão.

3. Peça a geração da declaração através do controlo disponível no gerador. A ferramenta combina os valores fornecidos numa declaração box-shadow, acrescenta px aos quatro valores numéricos e inclui inset quando essa opção está ativa.

4. Copie a declaração produzida para a regra CSS do elemento que quer estilizar. Se preferir uma sombra exterior, deixe a opção inset desativada; se precisar de uma sombra interior, ative-a antes de gerar o resultado.

Como interpretar o resultado

O resultado é uma declaração box-shadow formada pelos deslocamentos, pelo desfoque, pela expansão e pela cor escolhidos. Os valores numéricos aparecem com a unidade px; quando a opção interior está ativa, inset é acrescentado à declaração.

Uma indicação de sucesso significa que o percurso de cálculo apresentado conseguiu produzir um resultado. Ainda assim, deve confirmar visualmente o efeito no elemento e verificar se os valores correspondem ao desenho pretendido. A ferramenta está orientada para gerar box-shadow; não há informação verificada sobre outras propriedades CSS ou sobre regras adicionais para validar, arredondar ou limitar os valores introduzidos.

Se a declaração não tiver inset, o resultado representa uma sombra exterior. Para obter uma sombra interior, a opção correspondente tem de estar ativa no momento da geração.

Exemplo prático

Para aplicar uma sombra interior suave num painel, uma pessoa usa os valores indicados e confirma que o resultado é uma declaração CSS box-shadow gerada com sucesso.

Defina deslocamento horizontal 0, deslocamento vertical 0, desfoque 8, expansão 0 e cor #00000033; ative inset e gere a declaração.

Uma declaração box-shadow com quatro valores numéricos terminados em px, a cor indicada e o termo inset incluído.

Limitações

• A ferramenta está descrita para gerar declarações box-shadow; não é indicada informação verificada sobre outras propriedades CSS, intervalos numéricos, arredondamento ou limites de saída.

Erros comuns

• Se esperava uma sombra interior e a declaração não inclui inset, confirme se a caixa de seleção correspondente estava ativa antes de gerar o resultado.

Perguntas frequentes

A ferramenta consegue gerar uma sombra interior?

Sim, quando a opção inset está ativa, a declaração produzida inclui inset; com essa opção desativada, esse termo não é acrescentado.

Que valores são usados por predefinição?

Pode deixar os campos opcionais sem alteração e usar os valores predefinidos: 2, 2, 5, 0, #00000033 e inset desativado.

Posso usar zero nos valores numéricos?

Sim, no caso verificado, zero é aceite para os dois deslocamentos, para o desfoque e para a expansão.