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

Gerador de Cartão CSS

Crie o CSS de um contêiner de cartão: fundo, borda, raio dos cantos, espaçamento interno e sombra suave, com pré-visualização imediata e código para copiar e colar.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Gerador de README

Gere um README.md estruturado a partir de alguns campos: nome do projeto, tagline, recursos, comando de instalação, trecho de início rápido, autor e licença. Cole direto no seu repositório.

Gerador de Configuração Nginx

Gere blocos de servidor Nginx com TLS, HTTP/2, gzip, cache de navegador e regras de proxy reverso a partir de um formulário simples.

Ferramenta disponível em outros idiomas