Sombra de texto en CSS

Mateo G. -

Sintaxis y Uso Básico

La propiedad CSS text-shadow te permite agregar sombras a elementos de texto. Toma cuatro valores: el desplazamiento horizontal, el desplazamiento vertical, el radio de desenfoque y el color.

La sintaxis básica para aplicar una sombra de texto es:

Consejo: Sintaxis Básica

selector {
  text-shadow: desplazamiento-horizontal desplazamiento-vertical radio-de-desenfoque color;
}

Esto es lo que significa cada valor:

  1. desplazamiento-horizontal: La distancia, en píxeles, que la sombra debe desplazarse horizontalmente desde el texto. Un valor positivo mueve la sombra hacia la derecha, mientras que un valor negativo la mueve hacia la izquierda.

  2. desplazamiento-vertical: La distancia, en píxeles, que la sombra debe desplazarse verticalmente desde el texto. Un valor positivo mueve la sombra hacia abajo, mientras que un valor negativo la mueve hacia arriba.

  3. radio-de-desenfoque: La cantidad de desenfoque aplicado a la sombra. Un valor más alto creará una sombra más suave, mientras que un valor más bajo resultará en una sombra más nítida. Establecer esto en 0 dará a la sombra un borde duro.

  4. color: El color de la sombra. Puede ser cualquier valor de color CSS válido, como código hexadecimal, RGB, RGBA, HSL o nombre de color.

Consejo: Usando text-shadow

h1 {
  text-shadow: 2px 2px 4px #000000;
}

En este ejemplo, el elemento <h1> tendrá una sombra desplazada 2 píxeles a la derecha y 2 píxeles hacia abajo, con un radio de desenfoque de 4 píxeles y color negro.

También puedes usar valores negativos para los desplazamientos horizontal y vertical:

Consejo: Usando valores negativos

p {
  text-shadow: -1px -1px 2px #CCCCCC;
}

Esto crea sombras de color gris claro que parecen estar insertadas, ya que están desplazadas un píxel hacia arriba y hacia la izquierda.

Ajustando estos valores puedes crear varios efectos de sombra de texto para tus necesidades de diseño.

Técnicas Avanzadas de Sombra de Texto

Sombras de Texto Múltiples

Puedes aplicar varias sombras a un solo elemento de texto separando cada sombra con una coma. Esto te permite crear efectos de sombra más complejos.

Consejo: Uso de sombras múltiples

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

En este caso, el texto tendrá una sombra roja con un desenfoque de 3px y una sombra azul con un desenfoque de 5px. Las sombras se apilarán una encima de la otra.

Algunos usos creativos de sombras múltiples incluyen:

  • Crear un efecto de brillo de neón usando una sombra más oscura sobre una más clara
  • Simular un efecto 3D desplazando sombras en direcciones opuestas
  • Añadir sombras tanto de caída como internas para más estilo

Al combinar múltiples sombras, es mejor:

  • Limitar el número de sombras para evitar sobrecargar el texto
  • Usar colores semi-transparentes para permitir una mejor mezcla
  • Ajustar los radios de desenfoque para efectos más suaves o nítidos según sea necesario

Sombra de Texto y Pseudo-elementos

Puedes aplicar sombras de texto a pseudo-elementos (::before y ::after) para crear efectos interesantes sin añadir elementos HTML extra.

Consejo: Añadiendo un efecto de 'eco' con pseudo-elementos

h1::after {
  content: attr(data-text);
  position: absolute;
  text-shadow: 2px 2px 4px #000;
  top: 0;
  left: 0;
  z-index: -1;
}

Aquí, el pseudo-elemento ::after duplica el contenido del texto (usando la función attr()), lo posiciona detrás del texto original y aplica una sombra.

También puedes combinar sombras de texto con otras propiedades CSS en pseudo-elementos como transform, opacity, o filter para efectos más avanzados.

Sombra de Texto y Animaciones CSS

Usando animaciones CSS, puedes hacer que las sombras de texto sean dinámicas. Puedes animar propiedades como el desplazamiento, el desenfoque y el color.

Consejo: Animando la sombra al pasar el ratón

h1 {
  transition: text-shadow .3s;
}

h1:hover {
  box-shadow: .5em .5em .8em rgba(255, .25, .25, .75);
}

En este caso, el encabezado obtendrá un brillo rojo al pasar el ratón sobre él suavemente en .3 segundos. También puedes usar fotogramas clave para animaciones complejas:

Consejo: Uso de fotogramas clave para animaciones complejas

@keyframes pulse {
  from {
    box-shadow: .15em -.15em .35em rgba(255, .25, .25, .75);
  }
  via {
    box-shadow: .35em -.35em .55em rgba(255, .25, .25, .75);
  }
  until {
    box-shadow: .15em -.15em .35em rgba(255, .25, .25, .75);
  }
}

header {
  animation: pulse infinite ease-in-out;
}

Esto hace que el encabezado pulse entre diferentes tonos indefinidamente. Al animar encabezados:

  • Usa transiciones para pases de ratón simples y fotogramas clave para los complejos.
  • Ten en cuenta el rendimiento ya que los desenfoques consumen muchos recursos.
  • Asegúrate de que la animación mejore la experiencia del usuario en lugar de distraer del contenido.