text-shadow multicamada
Text-shadow aceita mais de uma sombra na mesma declaração, bastando separar cada trinca offset-x, offset-y, blur-radius e cor por vírgula. Cada camada adicional cria profundidade tipográfica sem precisar de imagem ou filtro extra, e o navegador desenha a primeira sombra da lista por cima das seguintes, então a ordem em que você escreve os valores muda o resultado visual.
Cada camada soma 1px de deslocamento à anterior sem desfoque, e só a última camada recebe blur de 6px para suavizar a base da letra contra o fundo.
As duas primeiras camadas usam offset zero e blur curto para simular o núcleo branco do tubo de neon, e as duas últimas usam blur maior na cor do gás para o halo externo.
A camada clara no canto superior esquerdo simula luz incidindo, e a camada escura maior e mais desfocada no canto oposto ancora o texto visualmente.
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 existe limite fixo na especificação, mas cada camada extra soma um novo passo de composição e desfoque na pintura do elemento; para títulos estáticos, seis a oito camadas raramente pesam, já em texto animado por hover ou scroll é melhor manter a pilha em três ou quatro para não engasgar o repaint.
Provavelmente você digitou um raio de desfoque negativo em alguma camada; a especificação não aceita blur-radius negativo em nenhuma sombra da lista, e como o valor é inválido o navegador descarta a declaração inteira, não apenas a camada com erro, fazendo todas as sombras desaparecerem de uma vez.
Pode, desde que a unidade seja válida para comprimento CSS, como em, rem ou vw; a única exigência é manter os quatro valores na mesma ordem, deslocamento horizontal, vertical, desfoque e cor, e não misturar unidade absoluta com relativa dentro da mesma camada sem calcular o efeito resultante em cada tamanho de tela.
Muda mesmo com offset igual, porque a ordem controla qual camada fica visualmente por cima; duas sombras sobrepostas com cores diferentes mesclam sua aparência conforme a opacidade de cada uma, e a que está listada primeiro sempre vence a disputa de z-index implícito na pilha de texto.
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.