¿Cómo puedo añadir sombras a un texto en CSS?

Puedes añadir sombras a un texto en CSS utilizando la propiedad text-shadow. Esta propiedad es bastante versátil y te permite aplicar una o varias sombras a los caracteres de un texto.

La sintaxis básica para una sola sombra es:

text-shadow: offset-x offset-y [blur-radius] [color];

Donde:

• offset-x (requerido): Especifica el desplazamiento horizontal de la sombra. Un valor positivo mueve la sombra hacia la derecha del texto, y un valor negativo la mueve hacia la izquierda. Se expresa en unidades de longitud (ej. px, em).
• offset-y (requerido): Especifica el desplazamiento vertical de la sombra. Un valor positivo mueve la sombra hacia abajo del texto, y un valor negativo la mueve hacia arriba. También se expresa en unidades de longitud.
• blur-radius (radio de desenfoque, opcional): Este valor de longitud (ej. px, em) determina cuán borrosa o difuminada será la sombra. Cuanto mayor sea el valor, más desenfocada se verá. Si es 0 (o se omite y no se especifica un color después), la sombra será nítida y con bordes definidos. El valor por defecto es 0.
• color (opcional, pero muy recomendado): Define el color de la sombra. Puede ser cualquier valor de color CSS válido (nombre de color, hexadecimal, RGB/RGBA, HSL/HSLA). Si se omite, el color de la sombra puede ser el mismo que el color del texto, pero el comportamiento exacto puede variar entre navegadores, por lo que es mejor especificarlo siempre.

Aplicar múltiples sombras:

Puedes aplicar varias sombras a un mismo texto separando cada definición de sombra con una coma. La primera sombra especificada se coloca más arriba y las subsiguientes se dibujan debajo.

h1.titulo-principal {
  /* Sombra simple: desplazada 2px a la derecha, 2px hacia abajo, color gris oscuro */
  text-shadow: 2px 2px #333333;
}

p.subtitulo-efecto {
  /* Sombra más suave y desenfocada: desplazada 1px en ambos ejes,
     con 3px de desenfoque y un color negro semitransparente */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.texto-neon {
  color: #fff; /* Texto blanco */
  /* Múltiples sombras para un efecto neón azul */
  text-shadow: 0 0 5px #fff,        /* Resplandor blanco interno */
               0 0 10px #fff,       /* Resplandor blanco medio */
               0 0 15px #fff,       /* Resplandor blanco externo */
               0 0 20px #0073e6,    /* Resplandor azul principal */
               0 0 30px #0073e6,
               0 0 40px #0073e6,
               0 0 55px #0073e6,
               0 0 75px #0073e6;
}
Lenguaje del código: PHP (php)

Consideraciones:

• Legibilidad: Usa las sombras con moderación. Sombras muy pronunciadas o con colores de bajo contraste pueden dificultar la lectura.
• Rendimiento: Aplicar muchas sombras complejas a grandes cantidades de texto podría, en teoría, tener un impacto en el rendimiento de renderizado, aunque para la mayoría de los casos de uso es insignificante.