Gerador de sombra de texto CSS

O gerador de sombra de texto CSS é um editor visual da propriedade Text-Shadow CSS. Você ajusta o deslocamento horizontal, o deslocamento vertical, o raio de desfoque, a cor e a opacidade com os controles deslizantes e observa o efeito renderizado ao vivo no texto da amostra e, em seguida, copia o CSS exato. Em vez de adivinhar os valores dos pixels e atualizar sua página, você molda a sombra diretamente e lê o código que ela produz.

A propriedade text-shadow é mais simples do que box-shadow - não tem raio de propagação e nenhuma palavra-chave inserida - mas a estratificação é onde ela fica poderosa Uma única declaração pode empilhar várias sombras, cada uma com seus próprios deslocamentos, desfoque e cor Empilhando camadas é como você constrói brilhos neon, contornos rígidos, letras 3 D retrô, efeitos de relevo tipográfico e sombras planas longas Escrevê-los à mão é complicado, então essa ferramenta gerencia as camadas e gera uma declaração separada por vírgulas e com especificações na ordem correta de pintura.

Tudo acontece no seu navegador. Escolha uma predefinição como neon glow ou contorno, ajuste cada camada, alterne a visualização entre fundos claros e escuros, edite o texto de amostra e copie o CSS. Sem conta, sem uploads e ele continua funcionando offline depois que a página é carregada.

A ordem da camada é executada de primeiro para último, de frente para trás, de modo que a sombra listada primeiro fica no topo É isso que faz os contornos funcionarem: quatro pequenas sombras deslocam um pixel em cada direção, empilhadas, aproximam um traço para o qual o CSS não tem propriedade direta O raio de desfoque é a parte cara a renderizar, e o texto com vários borrões grandes repintados em rolagem é uma causa comum de brincadeira em dispositivos de menor potência As sombras nunca afetam o layout, então elas podem transbordar sua caixa e ser cortadas por um pai com transbordamento oculto.