O CSS não aplica nenhuma sombra ao texto por padrão. Este é um exemplo de um parágrafo sem quaisquer sombras. Mas se você precisar adicionar sombras, pode usar a propriedade text-shadow.

text-shadow: /* Values */

No CSS, você pode descrever uma sombra através de uma combinação do seu deslocamento X, deslocamento Y, raio de desfoque e cor. Primeiro, você precisa especificar o deslocamento X e Y, que representam a distância horizontal e vertical da sombra em relação ao texto, respectivamente. Estes valores são obrigatórios. Aqui está um exemplo de como aplicar um deslocamento X e Y em uma sombra. Aplicamos a propriedade text-shadow com um deslocamento x de 3px e um deslocamento y de 2px:

<link rel="stylesheet" href="styles.css">
<p>Hello, World!</p>

p {
  text-shadow: 3px 2px;
}

No navegador, o texto e a sombra terão aparência semelhante mas também podemos personalizar a cor da sombra especificando o valor antes ou depois do deslocamento. Vamos definir a cor da sombra. Usaremos uma cor hexadecimal aqui mas você pode usar qualquer formato de cor válido.

<link rel="stylesheet" href="styles.css">
<p>Hello, World!</p>

p {
  text-shadow: 3px 2px #00ffc3;
}

Estamos escrevendo a cor depois do offset mas você também pode escrever a cor antes do offset se preferir. É equivalente:

<link rel="stylesheet" href="styles.css">
<p>Hello, World!</p>

p {
  text-shadow: #00ffc3 3px 2px;
}

No navegador, a sombra terá uma cor específica, para que possamos distingui-la muito facilmente do texto. Agora que podemos diferenciar a sombra do texto, também é importante ver como valores positivos e negativos afetam o deslocamento da sombra. Valores positivos do deslocamento X e do deslocamento Y moverão a sombra para a direita e para baixo, respectivamente, enquanto valores negativos moverão a sombra para a esquerda e para cima. Aqui está um exemplo que usa valores negativos em vez disso:

<link rel="stylesheet" href="styles.css">
<p>Hello, World!</p>

p {
  text-shadow: -3px -2px #00ffc3;
}

Agora a sombra se moverá para a esquerda e para cima em relação ao texto. Great. Mas a sombra não está ficando muito boa, porque ela parece exatamente com o texto original mas colocada atrás dele. Para deixar mais bonito, precisamos adicionar um terceiro valor, o raio de desfoque. Este valor é opcional mas faz a sombra parecer muito mais suave e sutil. O valor padrão do radius blur é zero. Quanto maior o valor, maior o desfoque, o que significa que a sombra fica mais clara. Aqui, estamos definindo o raio do desfoque para 3px e voltando a valores positivos para o deslocamento:

<link rel="stylesheet" href="styles.css">
<p>Hello, World!</p>

p {
  text-shadow: 3px 2px 3px #00ffc3;
}

Agora está começando a parecer uma sombra. É mais borrado e sutil, então podemos focar no texto principal enquanto a sombra adiciona um pouco de estilo ao fundo. A partir daqui, podemos ajustar os valores um pouco até encontrarmos uma combinação de offset, color e blur radius que atenda às nossas necessidades. Também é útil saber que o texto pode ter mais de uma sombra. Você só precisa escrevê-los na mesma propriedade text-shadow separados por vírgulas. Eles serão aplicados em camadas, da frente para trás, com a primeira sombra no topo. Aqui está um exemplo de um parágrafo com três sombras aplicadas em camadas. Observe que todas essas sombras são definidas na mesma propriedade text-shadow e separadas por vírgulas:

<link rel="stylesheet" href="styles.css">
<p>Hello, World!</p>

p {
  text-shadow: 
    3px 2px 3px #00ffc3, 
    -3px -2px 3px #0077ff, 
    5px 4px 3px #dee7e5;
}

text-shadow é uma poderosa propriedade CSS para fazer seu texto se destacar. Também pode melhorar o design geral da sua aplicação web. Ao escolher o offset, o blur e a cor, você pode criar uma ampla variedade de efeitos de sombra.