sombra de texto sobre imagem
Colocar um título claro sobre uma foto de fundo variável é o cenário mais comum para pedir socorro ao text-shadow, mas sombra sozinha não resolve contraste porque a cor por trás do texto muda de pixel a pixel; esta página mostra até onde o text-shadow ajuda e por que um overlay ou gradiente continua sendo a base de qualquer título legível sobre imagem.
O blur alto de 8px espalha a sombra além do contorno da letra, ajudando na parte clara da foto, mas continua insuficiente se a foto tiver uma nuvem branca atrás do título.
O gradiente escurece só o terço inferior da imagem, onde o título fica, mantendo o restante da foto sem véu escuro e sem depender do text-shadow para o contraste principal.
Inverter a lógica funciona em fotos predominantemente escuras, como uma cena noturna, mas ainda falha perto de qualquer fonte de luz clara dentro do enquadramento.
Sim. A propriedade recebe uma lista separada por vírgulas, pintada de frente para trás, a primeira sombra fica por cima. É assim que se criam contornos e brilhos de várias camadas.
Não garante, porque a razão de contraste da WCAG 2.1 compara texto e fundo pixel a pixel, e uma foto tem luminância variável; um text-shadow fixo ajuda nas regiões mais uniformes da imagem, mas falha justamente onde a foto muda de clara para escura embaixo do próprio texto.
Não existe um número universal, porque depende da cor do texto e da luminância média da foto sob o overlay; a prática comum começa em 40% a 50% de preto e sobe até a razão medida, com uma ferramenta de contraste, chegar a 4.5:1 para texto normal ou 3:1 para texto grande.
Fotos redimensionadas para tela pequena perdem detalhe fino e às vezes ganham mais contraste interno por causa da compressão, então uma combinação de sombra e overlay calibrada no desktop pode não sobrar margem suficiente numa tela menor; teste sempre no tamanho real de exibição, não só ampliado.
Dá, e é a combinação mais robusta: um overlay leve de 30% a 40% resolve o contraste médio da imagem inteira, e uma sombra curta de 2 a 3px de blur só reforça a borda das letras nos pontos onde o overlay sozinho ainda deixa a leitura marginal.
color: #E6ECE8;
text-shadow: 3px 4px 8px #3DDC97,
6px 8px 10px #3DDC97,
9px 12px 12px #3DDC97;O CSS é calculado localmente; o texto não é enviado ao servidor.