Gerador de sombras de texto CSS

Empilhe até cinco camadas text-shadow, cada uma com deslocamento, desfoque, opacidade e cor próprios, e confira o resultado num texto de exemplo. Copiar CSS coloca o bloco .shadowed-text na área de transferência.

Funciona localmente no seu navegador

Ver categoria: Frontend e design (34)

· text-shadow · rgba() · layered type

PAINEL DE CONTROLE

PRÉVIA

VoriTools

EXPORTAR CSS

Como empilhar camadas text-shadow e ler o CSS copiado

Até cinco camadas text-shadow se empilham numa prévia: o texto, o tamanho (24-120 px) e o peso (400/600/800/900), as cores de texto e fundo e, por camada, o deslocamento horizontal e vertical (60 px para cada lado), o desfoque (0-100 px), a opacidade (0-1) e a cor. Cada tecla redesenha o palco e o painel de código guarda exatamente a string que Copiar CSS coloca na área de transferência.

A página abre com duas camadas: 2px 3px 0px rgba(54, 217, 138, 0.9) sobre 6px 8px 18px rgba(6, 29, 20, 0.55), com VoriTools a 64 px e peso 800. A saída é um bloco .shadowed-text com uma linha de sombra por camada; a primeira camada da lista é pintada por cima.

Ajuste o texto da prévia (48 caracteres), o tamanho, o peso e as duas cores do palco. Tamanho, peso, cor do texto e fundo apenas vestem a prévia; a cor da camada é o que entra na saída.

Escolha a camada em Camada ativa. Cada camada mantém deslocamento, desfoque, opacidade e cor, e ao voltar você encontra exatamente o que deixou.

Digite o deslocamento horizontal e vertical (-60 a 60 px), o desfoque (0 a 100 px) e a opacidade (0 a 1). Ao sair do campo, o número limitado substitui o texto e a sombra é redesenhada; esvaziar o campo restaura o valor guardado em vez de gravar zero.

Adicionar camada copia a camada ativa e desce a cópia: deslocamento +2 px, desfoque +4 px (máximo 100) e opacidade -0,12 (mínimo 0,1). Cinco camadas é o máximo, Remover camada mantém ao menos uma, e os dois limites avisam na linha de status.

Copiar CSS coloca o bloco .shadowed-text na área de transferência caractere por caractere; Redefinir devolve VoriTools, 64 px, peso 800 e as duas camadas iniciais.

Valores iniciais, o contador de camadas e os valores regravados na confirmação

Limite de cinco camadas e uma cor por camada

A saída imprime uma linha de sombra por camada, unidas por vírgula e quebra de linha, sob o seletor fixo .shadowed-text e junto do valor do seletor de cor: color: #f7fff9 e text-shadow: 2px 3px 0px rgba(54, 217, 138, 0.9), 6px 8px 18px rgba(6, 29, 20, 0.55) numa página intacta.

A ordem aparece. No teste de pixels duas camadas dividiam o mesmo deslocamento de 12 px e só mudavam de cor: o vermelho em primeiro lugar desenhou bordas vermelhas e, trocando as cores, apareceu o azul - a primeira sombra da lista fica por cima.

Deslocamento, desfoque e o alfa do rgba()

O deslocamento é limitado a 60 px, o desfoque a 0-100 px e a opacidade a 0-1. Enquanto você digita a prévia fica dentro desses limites; ao sair, o valor limitado regrava o campo: 999 no deslocamento horizontal guarda 60 px e -10 no desfoque guarda 0 px.

O seletor de cor entrega um valor hex e a opacidade vira o canal alfa: #123456 com 0,5 exporta rgba(18, 52, 86, 0.5). Desfoque 0 imprime uma cópia dura do glifo, como faz a camada inicial 2px 3px 0px.

O que esta página não faz

Só a pilha de sombras e a cor do texto chegam à saída: texto da prévia, tamanho, peso e fundo do palco ficam no palco. Cada camada carrega uma cor só, então não há degradê nem spread por camada, nem sombra interna, nem modo de filtro drop-shadow().

Tudo roda na página: digitar, adicionar e remover camadas, Copiar CSS e Redefinir não enviaram nenhuma requisição de rede no teste (en e ja); a única requisição externa vem da tag de análise compartilhada. O seletor exportado é sempre .shadowed-text.