Gerador de sombra de texto (text-shadow)

Escreva o seu texto, ajuste a sombra com os controlos e copie o código text-shadow. Combinando várias camadas pode obter efeitos de néon, letras em 3D, contornos ou texto em relevo.

Como funciona o text-shadow

O text-shadow recebe o deslocamento horizontal e vertical, a desfocagem e a cor da sombra: por exemplo, 2px 2px 4px rgba(0, 0, 0, 0.4). Ao contrário do box-shadow, não tem expansão nem inset, e segue a forma de cada letra.

Tal como no box-shadow, é possível encadear várias sombras separadas por vírgulas; a primeira fica por cima. É assim que se obtêm os efeitos dos exemplos: o néon empilha sombras sem deslocamento e cada vez mais difusas, o 3D soma sombras nítidas deslocadas píxel a píxel e o contorno coloca quatro sombras nítidas à volta da letra.

Legibilidade

Uma sombra suave ajuda a ler um texto sobre uma fotografia, mas sombras fortes em parágrafos longos cansam a vista. Use-as em títulos e botões, e verifique sempre o contraste do texto com o fundo.