Softonic

Gerador de Sombra de Texto CSS

Etapa 1 / 2
Gerar CSS

Construir uma declaração text-shadow manualmente no DevTools funciona, mas se torna um palpite no momento em que você precisa de um brilho neumórfico suave, uma sombra de queda retro em duas camadas ou um contorno nítido de 1px em um título principal. Este gerador permite que você ajuste o deslocamento X, o deslocamento Y, o raio de desfoque e uma cor RGBA e copie uma linha CSS pronta para colar.

Como construir uma sombra de texto

  1. 1

    Defina os deslocamentos

    X é o deslocamento horizontal em pixels, Y é vertical. Y positivo empurra a sombra para baixo, Y negativo empurra para cima.

  2. 2

    Escolha o raio de desfoque

    Desfoque 0 dá uma silhueta dura; valores mais altos suavizam a sombra. As sombras suaves típicas usam de 4 a 12px de desfoque.

  3. 3

    Escolha uma cor

    Use uma string RGBA para ajustar a opacidade. `rgba(0,0,0,0.35)` é um padrão seguro para profundidade sutil em fundos claros.

  4. 4

    Copie a declaração

    A ferramenta gera `text-shadow: Xpx Ypx Blurpx color;`, cole-a no seletor correspondente no seu stylesheet.

Receitas de sombra de texto que realmente ficam boas

Uma sombra de texto é a soma de quatro números e uma cor. Lembre-se disso e você pode recriar quase qualquer efeito em uma revista ou página de destino.

Folha de dicas

Efeito Declaração
Profundidade sutil text-shadow: 0 1px 2px rgba(0,0,0,0.25);
Sombra suave text-shadow: 0 4px 12px rgba(0,0,0,0.35);
Contorno de 1px text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
Dupla retro text-shadow: 2px 2px 0 #f87171, 4px 4px 0 #111827;
Brilho neon text-shadow: 0 0 4px #22d3ee, 0 0 12px #22d3ee, 0 0 24px #0ea5e9;

Camadas de múltiplas sombras

text-shadow aceita uma lista separada por vírgulas. O navegador desenha usando o algoritmo do pintor, na ordem do código: a última sombra da lista fica atrás de todas as outras. Use isso para simular contornos (quatro sombras duras de 1px nas quatro direções) ou para criar profundidade empilhando uma sombra próxima nítida e uma sombra distante difusa.

Quando dispensar a sombra de texto

  • Em textos de corpo muito pequenos, desfoque acima de 2px fará com que os glifos pareçam borrados. Prefira -webkit-font-smoothing e contraste mais forte.
  • Em animações da seção hero críticas para o desempenho, evite mais de três sombras empilhadas; cada camada força o navegador a re-rasterizar o texto.
  • Se você precisar de uma sombra com um deslocamento apertado em um caminho complexo (curvas, rotações), considere um <filter> SVG com feDropShadow em vez disso, ele seguirá o contorno do glifo com mais precisão.

Perguntas frequentes

A saída é uma única camada de sombra por design. Para empilhar efeitos, execute o gerador várias vezes e encadeie os resultados com vírgulas, por exemplo text-shadow: 1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.3);.

text-shadow segue os contornos dos glifos do texto renderizado. box-shadow segue a caixa de borda retangular do elemento. Eles aceitam parâmetros semelhantes, mas rasterizam contra formas completamente diferentes.

Os navegadores rasterizam sombras de texto contra a grade de pixels do dispositivo. Uma sombra com desfoque 0 em uma tela 2x será renderizada em posições subpixel e pode parecer um pouco suave. Aumentar o desfoque para 1 geralmente melhora isso sem mudar o peso visual.

Os valores que você insere são enviados ao nosso servidor para construir a declaração, mas não são armazenados nem reutilizados. Na visão de várias etapas, eles viajam no link entre etapas; na visão de uma página, nada é mantido, atualize a página e tudo desaparece.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de Papel de Parede em Gradiente

Gere papéis de parede em gradiente borrados de três cores para laptop, telefone ou fundos do Zoom. Randomize ou defina o ângulo e o desfoque manualmente.

Gerador de Cores Análogas

Crie uma paleta análoga de cinco cores a partir de qualquer cor base, com o trio clássico, dois tons externos e valores hex, RGB e HSL.

Conversor de ASCII para Hex

Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.

Ferramenta disponível em outros idiomas