Ferramentas para desenvolvedores
Gerador de Text Shadow em CSS
Gere código CSS text-shadow com controlos para deslocamento horizontal, deslocamento vertical, desfoque e cor.
Executar ferramenta
O gerador de text-shadow em CSS permite criar rapidamente a regra de sombra para tipografia na web com valores personalizados de deslocamento, desfoque e cor. Pode definir o deslocamento horizontal no eixo X e o deslocamento vertical no eixo Y, indicando valores numéricos inteiros ou decimais, incluindo o valor zero. O parâmetro de desfoque determina a dispersão visual da sombra ao redor das letras, aceitando também valores numéricos positivos ou nulos. Para a cor, pode inserir códigos hexadecimais, valores com transparência alfa ou formatos de cor suportados em CSS. Caso não introduza valores específicos, a ferramenta aplica os valores padrão: 1 px para o deslocamento horizontal, 1 px para o deslocamento vertical, 2 px para o raio de desfoque e a cor translúcida #00000033. Após clicar em Executar, a área de resultado mostra a declaração CSS completa, estruturada com unidades de píxeis e terminada com ponto e vírgula para integração direta nos seus ficheiros de estilos.
Instruções
- Insira o valor numérico para o deslocamento horizontal no eixo X.
- Insira o valor numérico para o deslocamento vertical no eixo Y.
- Indique o valor numérico pretendido para o raio de desfoque.
- Defina a cor da sombra através de código hexadecimal ou texto de cor CSS.
- Clique em Executar para ver a declaração CSS text-shadow formatada na área de resultado.
Exemplos
- Configuração subtil com deslocamento horizontal 2, deslocamento vertical 2, desfoque 4 e cor rgba(0,0,0,0.2), gerando text-shadow: 2px 2px 4px rgba(0,0,0,0,0.2);
- Configuração de brilho sem deslocamento com valor 0 no eixo X, valor 0 no eixo Y, desfoque 8 e cor #00ffff, gerando text-shadow: 0px 0px 8px #00ffff;
Perguntas frequentes
É possível usar valores a zero nos deslocamentos e no desfoque?
Sim. Pode usar o valor 0 para o deslocamento horizontal, deslocamento vertical e desfoque, o que resulta em efeitos de contorno ou brilho uniforme em redor do texto.
Que formatos de cor posso introduzir no campo de cor?
Pode introduzir códigos hexadecimais de três, seis ou oito dígitos, valores RGB ou RGBA, bem como nomes de cores padronizados em CSS.
O que acontece se deixar os campos vazios?
Se não preencher os parâmetros, a ferramenta usa os valores padrão: 1 px de deslocamento horizontal, 1 px de deslocamento vertical, 2 px de desfoque e a cor #00000033.