A maioria dos efeitos de texto CSS que parecem complicados são feitos de uma propriedade O sinal de néon em uma página de destino, o contorno rígido em um título de jogo, as letras laranja empilhadas que se parecem com uma capa de registro dos anos 1970: cada um deles é um único text-shadow declaração com várias camadas separadas por vírgulas A sintaxe é curta A parte difícil é pegar deslocamentos e valores de desfoque que leem bem, e lembrar qual camada pinta no topo.
Este guia cobre o text-shadow gramática, como funciona a estratificação, as receitas por trás dos efeitos comuns com os valores exatos que usam e os erros que tornam o texto sombreado difícil de ler ou lento de renderizar Cada exemplo pode ser reconstruído no Gerador de sombra de texto CSS, que mostra o resultado ao vivo e escreve a declaração para você.
tl;dr:
text-shadowrecebe uma lista de sombras separada por vírgulas, cada uma escrita comooffset-x offset-y blur-radius color. A primeira sombra na lista pinta no topo Não tem valor de spread e nãoinsetpalavra-chave, ao contráriobox-shadow. Brilhos são várias sombras de deslocamento zero com desfoque crescente, contornos são quatro sombras duras de um pixel e texto 3 D é uma pilha de sombras duras cada um pixel mais para fora O Gerador sombra texto Toolz constrói estes com controles deslizantes e oito predefinições, lado do cliente, grátis, sem inscrição.
Qual é a propriedade CSS Text-Shadow?
o text-shadow property pinta uma ou mais sombras atrás dos glifos de um elemento' s texto.É definido no W3 C Módulo de decoração de texto CSS nível 3, e seu valor também é none ou uma lista de sombras separada por vírgulas.
Cada sombra tem até quatro partes:
| Parte | Necessário | O que faz | Valores permitidos |
|---|---|---|---|
| Deslocamento horizontal | sim | Move a sombra para a direita (positiva) ou para a esquerda (negativa) | Qualquer comprimento, e. 2px, -0.1em |
| Deslocamento vertical | sim | Move a sombra para baixo (positiva) ou para cima (negativa) | Qualquer comprimento |
| Raio de desfoque | Não, o padrão é 0 |
Suaviza a borda; maior significa mais desfocado | Zero ou um comprimento positivo Negativo é inválido |
| Cor | Não, o padrão é currentColor |
Cor da sombra, incluindo transparência | Qualquer cor CSS |
A cor pode ir primeiro ou último. text-shadow: #000 1px 1px e text-shadow: 1px 1px #000 são a mesma sombra Se você deixar a cor de fora, a sombra leva o texto' s cor própria, que raramente é o que você quer para uma sombra de gota, mas útil para um brilho rápido na cor do texto.
Uma sombra nunca muda de layout Ele não empurra os elementos vizinhos para longe ou cresce o elemento & #39; s caixa, então um grande borrão pode derramar fora da caixa e ser cortado por um pai com overflow: hidden.
Como o texto-sombra é diferente do box-sombra?
text-shadow segue a forma de cada letra, enquanto box-shadow segue o retângulo do elemento' s border box Essa é a diferença prática, e decide qual você alcança A gramática difere também.
| característica | text-shadow |
box-shadow |
|---|---|---|
| Forma da sombra | Cada contorno glifo | A caixa element's, incluindo cantos arredondados |
| Raio de propagação | Não disponível | Sim, quarto comprimento |
inset palavra-chave |
Não disponível | sim |
| Várias camadas | Sim, separado por vírgulas | Sim, separado por vírgulas |
| Ordem pintura | Primeiro listado no topo | Primeiro listado no topo |
| Cor padrão | currentColor |
currentColor |
| Uso típico | Títulos, logotipos, legibilidade sobre imagens | Cartões, botões, elevação |
O valor de spread ausente é o motivo pelo qual os contornos de texto precisam de quatro sombras em vez de uma. Com box-shadow você pode escrever 0 0 0 2px black para crescer um anel sólido Com texto não há como expandir o glifo, então você finge compensando cópias em várias direções Se você está estilizando o recipiente em vez das palavras, o guia gerador sombra caixa cobre camadas espalhadas, inseridas e elevadas.
Como funciona a estratificação de várias sombras de texto?
Uma única declaração pode conter quantas sombras você quiser, separadas por vírgulas, e o navegador pinta a primeira mais próxima do visualizador A última sombra da lista fica na parte de trás O texto em si sempre pinta acima de todas elas.
Essa ordenação é importante sempre que as camadas se sobrepõem. Compare essas duas declarações:
/* Sharp dark layer on top of a soft glow */
text-shadow: 2px 2px 0 #000, 0 0 12px #ff0;
/* Soft glow painted over the sharp layer */
text-shadow: 0 0 12px #ff0, 2px 2px 0 #000;
No primeiro, a cópia preta nítida fica afiada e a névoa amarela fica atrás dela No segundo, o brilho amarelo lava a cópia preta e suaviza as mesmas sombras, olhar diferente.
O gerador segue a mesma regra A camada 1 nas guias de camada é a primeira sombra na saída, então ela pinta em cima Adicionando uma camada anexa-a ao final da lista, atrás das outras Para mover uma camada para frente você a exclui e a recria, ou edita o CSS copiado à mão.
Quais valores o gerador Toolz escreve?
o gerador sombra texto dá a cada camada cinco controles e escreve uma declaração em um formato fixo Saber que o formato ajuda quando você cola o resultado em uma base de código com suas próprias convenções.
| Controle | Alcance | Passo | Escrito como |
|---|---|---|---|
| Compensação X | -50px a 50px | 1px | Npx |
| Compensação Y | -50px a 50px | 1px | Npx |
| Borrão | 0px a 100px | 1px | Npx, incluindo 0px |
| Cor | Coletor cor | - | hexadecimal de 6 dígitos |
| Opacidade | 0% a 100% | 1% | Adicionado como dois dígitos hexadecimais após a cor |
A opacidade é dobrada na cor como um valor hexadecimal de 8 dígitos, seguindo o CSS Color Module Nível 4 notação hex. Os dois últimos dígitos são o canal alfa em uma escala de 0 a 255, então a ferramenta multiplica a opacidade por 255, arredonda e converte em hexadecimal.
Veja como isso funciona para algumas opacidades:
| Deslizador opacidade | Vezes 255 | Arredondado | Hex alfa | Exemplo cor |
|---|---|---|---|---|
| 100% | 255 | 255 | ff |
#000000ff |
| 90% | 229,5 | 230 | e6 |
#4466eee6 |
| 70% | 178,5 | 179 | b3 |
#4466eeb3 |
| 60% | 153 | 153 | 99 |
#00000099 |
| 35% | 89,25 | 89 | 59 |
#00000059 |
| 25% | 63,75 | 64 | 40 |
#00000040 |
Todo navegador atual lê hexadecimal de 8 dígitos Se você deve suportar um navegador muito antigo, reescreva a cor como rgba() após copiar: #00000099 torna-se rgba(0, 0, 0, 0.6).
A ferramenta só aceita entrada de controle deslizante e selecionador, portanto os valores são pixels inteiros Para uma sombra medida em em, que escala com o tamanho da fonte, copie o CSS e troque as unidades da sua folha de estilo. A 2px offset no corpo do texto de 16 px é 0.125em.
Como você cria um efeito de texto de brilho neon?
Um brilho neon é várias sombras com deslocamento zero, a mesma cor brilhante e borrão crescente Cada camada adiciona um halo mais largo e mais fraco, e juntos eles parecem luz sangrando no ar circundante.
O gerador abre em sua predefinição Neon Glow, que produz isto:
text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;
Três camadas, borrão dobrando cada vez (7, 14, 28), opacidade que desce de 100% para 90% para 70% A camada apertada de 7 px dá às letras um núcleo brilhante, e a camada de 28 px espalha a cor em um fundo escuro com texto branco isso lê como um tubo iluminado Em um fundo claro a maior parte do efeito desaparece, e é por isso que a visualização tem um light bg / Dark bg togg: verifique ambos antes de enviar um brilho para um site com um interruptor de tema.
Para tornar o brilho mais forte, adicione uma quarta camada em desfoque de 56 px ou repita a camada de 7 px duas vezes A repetição de uma camada empilha sua opacidade e torna o núcleo mais intenso sem alargá-lo.
Como você delineia o texto com o texto-sombra?
Coloque quatro sombras duras (borrão 0) um pixel para fora em cada diagonal Sua sobreposição traça a borda de cada glifo.
A predefinição do Esboço escreve:
text-shadow: -1px -1px 0px #000000ff, 1px -1px 0px #000000ff, -1px 1px 0px #000000ff, 1px 1px 0px #000000ff;
Isso funciona bem em um pixel Em dois ou três pixels lacunas começam a mostrar nos pontos médios das curvas e bordas retas, porque as quatro cópias cobrem apenas as diagonais Para um contorno mais espesso, adicione mais quatro camadas nos eixos retos (0 -2px, 2px 0, 0 2px, -2px 0) então oito cópias circundam cada letra.
Existe uma alternativa não-sombra. -webkit-text-stroke desenha um traço real ao longo do caminho do glifo e é suportado pelos navegadores atuais, apesar de seu prefixo, Ele é centrado no contorno, por isso come em letras finas, e é especificado no Padrão de Compatibilidade WHATWG, em vez de em um módulo CSS Para contornos pequenos e nítidos no texto de exibição, o truque de quatro sombras continua sendo a opção mais previsível.
Como você faz texto 3 D ou extrudado?
Empilhe várias sombras duras na mesma cor, cada uma deslocada um pixel mais para baixo e para a direita Cada cópia adiciona um pixel de profundidade, e o olho lê a pilha como o lado de uma letra sólida.
A predefinição Retro 3D:
text-shadow: 1px 1px 0px #e99537ff, 2px 2px 0px #e99537ff, 3px 3px 0px #e99537ff, 4px 4px 0px #00000040;
Três camadas laranja constroem uma extrusão de três pixels, e uma quarta camada preta com 25% de opacidade fica um pixel mais distante como uma sombra de contato que fundamenta as letras Para uma extrusão mais profunda, continue adicionando camadas laranja com deslocamentos 4, 5, 6 e mova a camada escura até o final Doze camadas para uma extrusão de 12 px são normais para um grande título de herói.
A predefinição Long Shadow usa a mesma ideia com lacunas e opacidade desbotada:
text-shadow: 1px 1px 0px #00000033, 3px 3px 0px #00000026, 6px 6px 0px #0000001a, 10px 10px 0px #0000000f;
As compensações crescem (1, 3, 6, 10) enquanto a opacidade cai (20%, 15%, 10%, 6%), de modo que a sombra se afasta na diagonal em vez de formar um bloco sólido.
Qual receita de sombra de texto se encaixa em qual efeito?
Aqui estão todas as oito predefinições no gerador, com a ideia por trás de cada uma para que você possa adaptá-las.
| Predefinição | Camadas | Compensações | Borrão | Ideia |
|---|---|---|---|---|
| Suave | 1 | 0, 2px | 4px | Sombra de gota sutil em 35% preto, seguro para a maioria dos títulos |
| Difícil | 1 | 2px, 2px | 0 | Cópia deslocada crocante em 60% preto, um olhar plano da cópia |
| Neon Blow | 3 | 0, 0 | 7, 14, 28px | Mesma cor, crescente desfoque, para luz no escuro |
| Retrô 3D | 4 | Diagonal de 1 a 4px | 0 | Cópias impressas escalonadas mais uma leve sombra de contato |
| Esboço | 4 | Diagonais +/-1px | 0 | Quatro cópias traçando a borda do glifo |
| Gravar | 2 | -1px/-1px e 1px/1px | 0 | Destaque branco superior esquerdo, tom escuro inferior direito |
| Fogo | 3 | 0, -1/ -2/ -4px | 4, 10, 18px | Amarelo a laranja a vermelho, subindo |
| Sombra Longa | 4 | Diagonal de 1, 3, 6, 10px | 0 | Lacuna crescente, opacidade desbotada |
Emboss é o único povo mal interpretado Ele emparelha uma sombra de luz para cima e para a esquerda com uma sombra escura para baixo e para a direita, que imita a luz do canto superior esquerdo batendo letras em relevo Troque as duas cores e o texto parece pressionado na página em vez disso, o efeito clássico tipográfico Ambos só funcionam quando a cor do texto está perto da cor de fundo; no texto de alto contraste os destaques desaparecem.
O fogo é o único predefinido com deslocamentos verticais negativos Cada camada se move mais para cima e fica mais desfocada e vermelha, de modo que o calor parece subir das letras.
A sombra de texto prejudica a legibilidade ou a acessibilidade?
Pode, e o risco cresce com desfoque e deslocamento Uma sombra não altera a relação de contraste que as WCAG medem, que é calculada entre a cor do texto e a cor de fundo mínimo de contraste WCAG 2.1 pede 4,5:1 para texto normal e 3:1 para texto grande, e um brilho não ajuda você a encontrar isso no papel.
Na prática, uma sombra escura fina atrás de texto claro numa fotografia ocupada torna as letras mais fáceis de escolher, porque separa as arestas do glifo da imagem Um brilho pesado num texto pequeno faz o oposto: o halo preenche os contadores de letras como o & quot; e & quot; e o & quot; a & quot; e a palavra vira mush.
Algumas diretrizes que resistem:
- Mantenha as sombras do corpo do texto sutis. Algo como
0 1px 2px rgba(0, 0, 0, 0.3)é bastante. - Salve efeitos multicamadas para texto de exibição grande, aproximadamente 32px ou mais.
- Verifique o efeito em fundos claros e escuros se o seu site tiver um tema alternado.
- Não confie na sombra para resgatar o baixo contraste Corrija a cor do texto primeiro.
- Teste no menor tamanho que o rumo atinge em um telefone, onde a sombra é proporcionalmente maior.
O que retarda o texto-sombra e o que são erros comuns?
O desfoque é a parte cara Toda camada desfocada tem que ser rasterizada e desfocada em cada repintura, e o custo é dimensionado com o raio de desfoque e a quantidade de texto O Referência MDN para sombra de texto cobre a sintaxe O lado da performance é simples de raciocinar: um brilho de três camadas em um único título é barato, e o mesmo brilho em cada parágrafo de um artigo longo, repintado durante a rolagem, é uma fonte comum de jank em telefones de baixa potência.
Erros que aparecem repetidas vezes:
| Erro | Sintoma | Consertar |
|---|---|---|
Escrevendo um valor de spread como 0 0 4px 2px red |
Toda a declaração é ignorada | Remova o quarto comprimento; sombra de texto não tem propagação |
Adicionando inset |
Declaração ignorada | Não suportado em texto; use um relevo mais leve |
Desfoque negativo, e. -2px |
Declaração ignorada | O desfoque deve ser zero ou positivo |
| Vírgulas ausentes entre camadas | Declaração ignorada, nada resulta | Separe cada sombra com uma vírgula |
| Brilho cortado nas bordas | Halo cortado em linha reta | Pai tem overflow: hidden; adicionar preenchimento |
| Brilho invisível | Nada parece acontecer | Brilho claro no fundo claro; teste no escuro |
Prefixo fornecedor -webkit-text-shadow |
Inofensivo, mas inútil | Use simples text-shadow; não precisa de prefixo |
Os três primeiros valem a pena enfatizar Uma única parte inválida invalida toda a declaração, não apenas essa camada, então um erro de digitação na camada quatro de um efeito 3 D de doze camadas remove todos os doze A saída do generator' s é sempre válida, o que é uma razão para construir a pilha lá e colá-la.
Quando você deve usar um gerador em vez de escrever texto-sombra à mão?
Uma única sombra suave é mais rápida de digitar do que clicar Qualquer coisa com três ou mais camadas é mais rápida de construir visualmente, porque você está julgando um olhar, e um olhar é difícil de julgar a partir de números O gerador também é útil para aprender: escolha uma predefinição, altere uma camada e observe qual parte do efeito se move.
O gerador Toolz é executado inteiramente no navegador A visualização, a lista de camadas e o CSS são todos computados na página, nada é carregado, e ele continua funcionando offline uma vez carregado É gratuito, sem inscrição Copiar CSS é contado contra uma permissão de uso diário, como outras ferramentas no site; edição e visualização não são.
O que não faz: não tem em ou rem unidades, sem campos numéricos digitados, sem arrastar para reordenar para camadas e sem fonte personalizada na visualização Para aqueles, copie a declaração e ajuste-a em sua própria folha de estilo ou ferramentas de desenvolvimento do navegador.
Se o efeito que você deseja é um elemento desfocado ou recolorido, em vez de uma sombra, Filtros CSS tais como drop-shadow() e blur() aplicar a elementos inteiros, incluindo imagens Painéis foscos atrás do texto são um trabalho para o gerador glassmorphism, e botões extrudados macios pertencem ao gerador neumorfismo. O conjunto completo de construtores visuais de CSS está no Hub de ferramentas CSS, e o Guia do gerador gradiente CSS combina bem com efeitos de texto quando você deseja um fundo gradiente atrás de um título brilhante.
Um exemplo trabalhado: um título de herói legível sobre uma foto
Digamos que você tenha texto branco de 64 px sobre uma foto brilhante da praia e as letras continuem desaparecendo na areia O objetivo é a legibilidade primeiro, o estilo segundo.
Comece no ferramenta texto-sombra com a predefinição Soft: 0px 2px 4px #00000059. Em uma imagem ocupada que é muito fraca Eleve a opacidade para 60% e desfocar para 8 px, o que dá 0px 2px 8px #00000099. As bordas se separam do fundo, mas traços finos ainda piscam.
Adicione uma segunda camada com deslocamento zero, desfoque de 2 px e 50% preto: 0px 0px 2px #00000080. Porque você adicionou em segundo lugar, ele pinta atrás da primeira camada, mas abraça a borda do glifo e dá a cada traço uma borda escura fina O resultado:
.hero-title {
color: #fff;
font-size: 64px;
text-shadow: 0px 2px 8px #00000099, 0px 0px 2px #00000080;
}
Duas camadas, ambas baratas de renderizar, e o título se mantém na areia, no céu e no surf. Em um telefone onde o rumo cai para 36px, os mesmos valores de pixel são proporcionalmente mais pesados; convertendo para em mantém-nos em passo (0 0.03em 0.125em às 64px).
