Propriedade text-shadow


A propriedade text-shadow é utilizada para adicionar sombras ao texto.

Sintaxe

A sintaxe da propriedade text-shadow é a seguinte:

.seletor {
  text-shadow: h-shadow v-shadow blur-radius color;
}
  • h-shadow: Define o deslocamento horizontal da sombra.
  • v-shadow: Define o deslocamento vertical da sombra.
  • blur-radius: Opcional. Define o desfoque da sombra. Quanto maior o valor, mais difusa será a sombra.
  • color: A cor da sombra.

Exemplos

Sombra básica

.texto-sombra {
  text-shadow: 2px 2px 4px #888888; /* Sombra deslocada 2px horizontal e 2px vertical, com desfoque de 4px e cor cinza */
}

Sombra com maior desfoque

.texto-desfoque {
  text-shadow: 1px 1px 10px #FF4500; /* Sombra com deslocamento de 1px e desfoque de 10px, cor laranja */
}

Múltiplas sombras

.texto-multi-sombra {
  text-shadow: 2px 2px 2px #FF6347, -2px -2px 2px #87CEEB; /* Duas sombras: uma deslocada para a direita e para baixo, outra deslocada para a esquerda e para cima */
}

Referências