Como gerar uma declaração CSS text-shadow

Introduza os deslocamentos, o desfoque e a cor para obter uma declaração CSS text-shadow. Os valores numéricos são apresentados em px e a declaração termina com ponto e vírgula.

Para que serve o gerador de text-shadow

O CSS text-shadow acrescenta uma sombra ao texto através de quatro dados: deslocamento horizontal, deslocamento vertical, desfoque e cor. Este gerador cria a declaração CSS correspondente, o que é útil quando quer preparar rapidamente uma regra para uma folha de estilos sem escrever a combinação de valores manualmente.

Os três valores numéricos podem ser ajustados conforme o efeito pretendido e a cor é introduzida como texto. Se deixar um campo opcional sem valor, são usados valores predefinidos: 1 para o deslocamento horizontal, 1 para o deslocamento vertical, 2 para o desfoque e #00000033 para a cor.

Como gerar a declaração CSS

1. Abra o gerador de CSS text-shadow.
2. Introduza um valor numérico para o deslocamento horizontal, se quiser alterar a posição lateral da sombra.
3. Introduza um valor numérico para o deslocamento vertical, se quiser alterar a posição para cima ou para baixo.
4. Defina o desfoque com um valor numérico. Um valor maior produz um valor de desfoque maior na declaração gerada; o gerador limita-se a escrever o número fornecido neste campo.
5. Introduza a cor como texto, por exemplo, uma notação de cor que pretenda usar.
6. Consulte a declaração produzida e utilize-a na regra CSS do elemento de texto.

Também pode deixar os campos opcionais sem preencher. Nesse caso, o resultado usa os valores predefinidos do gerador. Para uma sombra sem deslocamento ou sem desfoque, introduza 0 no campo correspondente: zero é aceite para os dois deslocamentos e para o desfoque.

Como interpretar o resultado

O resultado é uma declaração text-shadow formada pelos valores do deslocamento horizontal, do deslocamento vertical, do desfoque e da cor. Os três valores numéricos aparecem com a unidade px, e a declaração termina com ponto e vírgula. Por exemplo, uma combinação de 3 no deslocamento horizontal, -1 no deslocamento vertical, 4 no desfoque e #123456 na cor produz uma declaração com a forma text-shadow: 3px -1px 4px #123456;.

Leia a ordem dos valores antes de aplicar o resultado: o primeiro corresponde ao deslocamento horizontal, o segundo ao vertical, o terceiro ao desfoque e o último à cor. Se não tiver introduzido um valor opcional, compare o resultado com os valores predefinidos para perceber qual foi aplicado. Alterar os campos e gerar novamente permite comparar configurações de sombra diferentes.

Exemplo prático

Está a preparar uma regra CSS para aplicar uma sombra colorida a um título.

Num cenário em que pretende uma sombra ligeiramente deslocada para a esquerda, introduza 3 no deslocamento horizontal, -1 no vertical, 4 no desfoque e #123456 na cor; depois consulte a declaração gerada.

A saída tem a forma text-shadow: 3px -1px 4px #123456;, com os três valores numéricos em px e ponto e vírgula no fim.

Limitações

• A ferramenta gera a declaração text-shadow com os quatro dados suportados: deslocamento horizontal, deslocamento vertical, desfoque e cor; não substitui a definição de outras propriedades CSS.

Erros comuns

• Se a sombra não ficar na posição esperada, verifique a ordem dos dois deslocamentos: o primeiro é horizontal e o segundo é vertical. Para eliminar um deslocamento ou o desfoque, escreva 0 no campo respetivo em vez de o deixar confundir-se com um valor predefinido.

Perguntas frequentes

Que dados posso introduzir no gerador?

Os campos numéricos aceitam valores para os deslocamentos horizontal e vertical e para o desfoque; a cor é introduzida como texto.

Que valores são usados quando deixo campos vazios?

Quando esses campos ficam sem valor, o gerador usa 1 para o deslocamento horizontal, 1 para o vertical, 2 para o desfoque e #00000033 para a cor.

Posso usar zero nos valores numéricos?

Zero é aceite nos dois deslocamentos e no desfoque, por isso pode ser usado para remover esse componente da sombra na declaração gerada.