Gerador CSS de sombra de texto

Crie uma pilha de sombras de texto

1. Edite o texto de exemplo e o deslocamento horizontal e vertical, raio de desfoque, cor e opacidade de cada camada ativa. Os campos aceitam centésimos; controles deslizantes facilitam ajustes inteiros.
2. Adicione, duplique, desative, remova ou mova camadas. A primeira camada ativa fica à frente das demais sombras. Camadas desativadas mantêm os valores, mas são omitidas do CSS.
3. Confira o CSS e a prévia nativa e selecione Copiar CSS. Apenas a declaração de sombra é copiada; texto, tipografia e fundo são contexto da prévia.

Entenda as camadas criadas

Cada camada gera deslocamentos horizontal e vertical e desfoque não negativo em pixels CSS, seguidos de uma cor RGBA explícita. Valores negativos movem para a esquerda ou para cima; desfoque zero produz sombra nítida deslocada. A propriedade segue os glifos, não a caixa retangular.

A primeira sombra é pintada à frente das seguintes, enquanto as sombras externas ficam atrás do texto. Mover camadas pode mudar as cores sobrepostas. Essa pilha é diferente de uma sequência de filtros em que cada operação recebe o resultado anterior.

A opacidade da sombra se torna o alfa da cor dessa camada. Por exemplo, 37,5% se torna exatamente 0.375 sem quantização alfa de oito bits. A opacidade do texto é uma opção separada: texto transparente ainda pode ter sombras visíveis.

Uma camada transparente ativa permanece na declaração. Desativar todas as camadas ou limpar a lista gera text-shadow: none;, que redefine explicitamente sombras herdadas; uma declaração vazia inválida não a substitui.

Exemplos de ordem, cor e transparência

A primeira camada do exemplo usa -3.25px na horizontal, 6.5px na vertical e desfoque 0px, com #336699 a 37%. Seus canais são 51, 102 e 153 e o alfa é 0.37. A segunda camada laranja usa 0px, -2px, desfoque de 12px e 80%.

Mover a camada laranja para o início altera a ordem separada por vírgulas sem mudar seus valores. A prévia mostra sobreposições; a ferramenta não mescla duplicatas, não ordena cores nem remove camadas invisíveis.

Uma camada preta transparente com deslocamento e desfoque zero é CSS válido mesmo sem sombra visível. Desativá-la a remove da pilha; sem camadas ativas, o resultado é none.

Limites de edição e prévia

O editor aceita até doze camadas, deslocamentos de -64 a 64 pixels CSS, desfoque de 0 a 64, cores hexadecimais de seis dígitos e opacidade de 0 a 100%, com precisão de centésimos. Usa deliberadamente um subconjunto estabelecido sem expansão, inset, currentColor, unidades arbitrárias ou importação de CSS; especificações recentes discutem sintaxe adicional.

O exemplo usa texto simples e fonte local do sistema. Fontes alternativas, glifos, tamanho e quebras de linha afetam a aparência. Apenas text-shadow é copiado, por isso outra página pode diferir. Não é certificação de contraste, legibilidade ou igualdade de pixels.

Sombras não ampliam o layout do texto nem a área rolável. A área com preenchimento é aproximada e as bordas podem cortar desfoque ou deslocamentos. A rolagem não garante acesso a todos os pixels da sombra.

Valores inválidos em camadas ativas removem o CSS e o exemplo estilizado até a correção. Valores de camadas desativadas são ignorados até a reativação. Opções de prévia inválidas ocultam apenas o exemplo; texto vazio é permitido.

Estilo local sem enviar texto

A ferramenta não adiciona upload, fontes remotas, histórico de configurações, links com dados nem telemetria contendo seu exemplo e suas configurações. A cópia é explícita. Serviços existentes, extensões e cópias guardadas não estão cobertos por promessa universal de privacidade ou exclusão.