Text-shadow en diseño web: cuándo usar sombras en los textos
Aprende cuándo usar text-shadow en diseño web para mejorar la legibilidad o reforzar el estilo sin añadir ruido a la tipografía.
WordPress 7.1 incorpora soporte para text-shadow en theme.json. Los temas podrán declarar sombras de texto desde Estilos globales y aplicarlas a toda la tipografía, a bloques concretos o a elementos como los enlaces. Hasta ahora, este efecto tenía que añadirse mediante CSS y quedaba fuera de la configuración global del tema.
En esta primera implementación todavía no habrá controles visuales para crear sombras desde el editor. WordPress reconocerá la propiedad textShadow dentro de theme.json, mientras que la interfaz, los presets y los ajustes para bloques individuales llegarán más adelante.
Que una propiedad entre en los Estilos globales hace que resulte más fácil utilizarla pero también hace más fácil extenderla a textos que no la necesitan.
Una sombra crea una segunda forma alrededor de las letras. Puede ayudar a separarlas de un fondo complejo o construir un efecto visual reconocible, pero cuando no cumple ninguna de esas funciones, añade ruido y suciedad al diseño.
En este artículo, vamos a ver cómo funciona text-shadow, qué puede aportar a una composición y cómo decidir cuándo una sombra mejora el texto y cuándo conviene quitarla.
Qué hace realmente una sombra en un texto
La propiedad CSS text-shadow genera una sombra a partir de la forma de cada carácter. Su sintaxis más habitual incluye cuatro valores:
.titulo {
text-shadow: 0.08em 0.08em 0.16em rgb(0 0 0 / 0.35);
}El primer valor controla el desplazamiento horizontal. Un valor positivo mueve la sombra hacia la derecha y uno negativo, hacia la izquierda.
El segundo valor establece el desplazamiento vertical. Los valores positivos desplazan la sombra hacia abajo y los negativos, hacia arriba.
El tercer valor define el desenfoque. Un valor bajo mantiene la forma bastante definida. A medida que aumenta, la sombra se extiende y pierde nitidez.
El último valor determina el color y la opacidad.
En este ejemplo he utilizado em para que la sombra mantenga una proporción coherente con el tamaño del texto. Si el titular crece o se reduce, el desplazamiento y el desenfoque cambian con él.
También podemos combinar varias sombras separándolas con comas:
.titulo {
text-shadow:
0.04em 0.04em 0 rgb(0 0 0 / 0.6),
0 0 0.3em rgb(255 0 180 / 0.8);
}La primera sombra crea un desplazamiento definido. La segunda genera un resplandor de color alrededor de las letras. Esta combinación permite construir efectos más expresivos, como neones, relieves, contornos o desplazamientos cromáticos.
Cada sombra añade otra forma más alrededor de las letras. Cuanto más oscura, separada o desenfocada sea, más compite con el trazado de la letra.
Por eso no podemos evaluar una sombra de manera aislada. Tenemos que verla junto al tamaño del texto, el peso de la tipografía, el fondo, el color y la función que cumple ese texto dentro de la página.
Dos motivos para utilizar una sombra en un texto
Podemos encontrar sombras en logotipos, portadas, anuncios, carteles, titulares sobre fotografías y elementos de navegación. Pero que se utilicen en todos esos contextos no significa que siempre aporten algo bueno al diseño.
Que un texto sea grande o expresivo permite aplicar una sombra con menos riesgo para la legibilidad, pero eso no significa que vaya a mejorar el diseño.
Antes de añadir una sombra, tenemos que tener claro qué función va a cumplir. En la mayoría de los casos razonables, la respuesta se encuentra en uno de estos dos motivos.
Mejorar la separación respecto al fondo
Cuando el texto aparece sobre una fotografía o una superficie con muchas variaciones de color y luminosidad, algunas partes de las letras pueden confundirse con el fondo.
Una sombra sutil puede reforzar el contorno de los caracteres. De esta manera, no tendremos que oscurecer la imagen y el texto se mantendrá reconocible mientras conservamos suficiente luminosidad y detalle en la fotografía.
Construir un efecto visual reconocible
Una sombra también puede formar parte del lenguaje visual de una pieza.
Un resplandor de color permite imitar una luz de neón. Varias sombras desplazadas pueden crear un efecto retro. Una sombra definida puede sugerir relieve o volumen.
En estos casos, la sombra aporta significado visual. Ayuda a que las letras se parezcan al objeto, la técnica o la estética que queremos representar.
Fuera de estas dos funciones, el efecto requiere una justificación especialmente clara. Si el texto ya se lee bien y la sombra tampoco construye identidad, lo más probable es que esté añadiendo un efecto que la composición no necesita.
Seis ejemplos para decidir si una sombra suma o resta en tu diseño
La mejor manera de valorar text-shadow consiste en comparar situaciones concretas.
Los siguientes ejemplos muestran contextos donde solemos encontrar sombras en los textos. Dos de ellas cumplen una función clara. En las demás, el efecto aporta poco o perjudica el resultado.
1. Un titular sobre una fotografía compleja
En el primer ejemplo, el titular aparece sobre una fotografía con muchas variaciones de color, luminosidad y textura.
Detrás de una misma palabra encontramos zonas claras, montañas oscuras, cielo, agua y pequeños detalles. Sin algún recurso que separe las letras del fondo, algunas partes del titular podrían perderse.
Una posibilidad sería oscurecer toda la fotografía mediante un velo de color o un degradado. Esta solución suele funcionar bien, aunque también reduce la luminosidad y el protagonismo de la imagen.
La sombra permite actuar únicamente alrededor de las letras. Refuerza su contorno mientras conserva buena parte de la luz y el detalle de la fotografía.
.titulo-sobre-imagen {
color: white;
text-shadow: 0 0.05em 0.16em rgb(0 0 0 / 0.55);
}El desplazamiento es pequeño y el desenfoque crea una zona oscura alrededor de los caracteres sin convertir la sombra en el elemento protagonista.
Aquí el efecto cumple una función concreta: mejora la separación entre el texto y el fondo irregular para que sea más legible.
Incluso en este ejemplo, yo diría que la sombra tiene demasiado protagonismo: hay que ponerle el mínimo de opacidad necesario para que cumpla su función, de manera que la sombra prácticamente ni se perciba si no te fijas.
2. Una sombra innecesaria en una landing page
En el segundo ejemplo, el titular aparece sobre un fondo bastante uniforme.
El color del texto ya ofrece suficiente contraste y las pequeñas variaciones del fondo no interfieren con el trazado de las letras. El mensaje se leería correctamente sin aplicar ningún efecto.
La sombra tampoco construye una estética concreta. No crea un relieve reconocible, no forma parte de una iluminación coherente ni aporta un rasgo propio a la campaña publicitaria. Únicamente duplica el contorno y hace que el titular resulte algo más pesado.
Podríamos pensar que la sombra ayuda al texto a destacar, pero el tamaño, el peso y la posición ya le conceden suficiente jerarquía. Añadir más intensidad visual no mejora necesariamente esa jerarquía.
Aquí podemos aplicar una máxima útil para cualquier recurso gráfico:
Si un elemento ya funciona desde el punto de vista de la legibilidad, la comprensión y la identidad, no añadas más efectos.
Esta composición mejoraría mucho simplemente quitando la sombra.
3. Una sombra que ensucia un logotipo tipográfico
En un logotipo, la tipografía participa en la construcción de la marca. El dibujo de las letras, sus proporciones y la relación entre los trazos resultan tan importantes como la palabra que leemos.
En el tercer ejemplo, la tipografía tiene un carácter fino y elegante. Su trazado limpio forma parte de la identidad del logotipo.
La sombra crea una forma oscura alrededor de las letras y ensucia ese dibujo. El gran tamaño evita que aparezca un problema serio de legibilidad, pero el estilo pierde fuerza.
En este caso, el efecto mantiene el texto legible y, aun así, empeora el diseño.
La sombra no refuerza la principal cualidad de la tipografía, sino que compite con ella.
En otros logotipos sí podría tener sentido utilizar sombras. Una marca con una estética clásica, artesanal, retro o tridimensional podría incorporar el relieve como parte de su identidad, aunque esta complejidad tendría que estar muy justificada y también habría que comprobar cómo funciona en tamaños reducidos.
Un efecto limpio en una cabecera grande puede convertirse en una mancha dentro de un menú, en una tarjeta pequeña o en un avatar. Para resolver estos casos en los que la sombra haga que sea menos legible, la marca necesitará versiones simplificadas.
Además, que el logotipo utilice una sombra no obliga a trasladarla a los títulos, los enlaces o los botones de la web. La identidad de la marca y la tipografía funcional de la interfaz pueden seguir reglas diferentes.
4. Un titular editorial que ya tiene suficiente presencia
En el cuarto ejemplo, el titular aparece sobre un fondo claro y estable.
La letra tiene más peso que en el logotipo anterior, por lo que la sombra se integra algo mejor. El contorno no se ensucia de una forma tan evidente.
Aun así, tampoco aporta demasiado.
El texto ya dispone de contraste, tamaño y peso suficientes para dominar la composición. La sombra añade volumen, pero no mejora la lectura ni refuerza especialmente el carácter editorial de la portada.
Podríamos quitarla y la jerarquía seguiría funcionando.
Las portadas digitales, los reportajes y los artículos especiales admiten tratamientos tipográficos más expresivos. Pueden utilizar sombras, desplazamientos o composiciones inspiradas en revistas y carteles. La decisión tiene que formar parte del concepto editorial de esa pieza.
Aplicar una sombra porque el titular es grande o porque ocupa una portada no es razón suficiente. El efecto necesita colaborar con el tono, la imagen y el resto de decisiones visuales.
En este ejemplo, la tipografía limpia resolvería mejor la composición.
5. Sombras que construyen un efecto de neón
El quinto ejemplo utiliza varias sombras de color para crear un efecto de luz.
Aquí la sombra cumple una función completamente distinta. No intenta corregir un problema de contraste sino que construye la apariencia del texto.
Las letras imitan tubos de neón y las sombras reproducen el resplandor que proyectaría la luz sobre una superficie oscura. El efecto ayuda a reconocer el material y refuerza el ambiente nocturno del cartel.
Podríamos construirlo con varias capas:
.titulo-neon {
color: white;
text-shadow:
0 0 0.08em rgb(255 255 255 / 0.9),
0 0 0.2em rgb(255 0 170 / 0.9),
0 0 0.45em rgb(255 0 170 / 0.75),
0 0 0.8em rgb(255 0 170 / 0.5);
}Cada sombra amplía el halo de color alrededor de las letras. Las primeras mantienen la forma y las últimas generan la difusión luminosa.
Sin esas sombras, el texto seguiría siendo legible, pero perdería buena parte de su intención visual.
La sombra forma parte de la propia construcción del efecto, no parece un adorno añadido al terminar el diseño.
Otro error que se suele cometer es aplicar los efectos a todos los elementos. Como vemos en este ejemplo, es importante que la expresión visual se concentre únicamente en el mensaje principal. La fecha, el lugar, el precio y la llamada a la acción necesitan un tratamiento más limpio, para que sean más legibles y destaquen menos, de manera que el usuario pueda encontrar fácilmente la información práctica.
6. Una sombra que perjudica el texto funcional
La última aplicación muestra un elemento de navegación con una sombra intensa.
Los menús contienen textos pequeños que el usuario necesita reconocer con rapidez. Cada palabra representa un destino y forma parte de una interfaz que se utiliza de manera repetida.
En este tamaño, la sombra ocupa una proporción importante respecto al cuerpo de la letra. El contorno se difumina y los caracteres pierden nitidez.
Se podría usar la sombra en los estados hover si se tratara de una interfaz muy expresiva, pero no debería convertirse en la señal principal.
En textos pequeños y funcionales, cualquier forma añadida alrededor de las letras aumenta el ruido en uno de los componentes que más precisión y legibilidad necesita.
Dónde conviene evitar las sombras en los textos
La sombra tiene poco margen de error cuando el texto cumple una función práctica.
Los párrafos necesitan un contorno limpio para mantener un ritmo de lectura cómodo. Aplicarles una sombra obligaría al ojo a procesar constantemente una forma adicional alrededor de cada letra.
En etiquetas de formularios, mensajes de error, avisos, tablas y datos numéricos, el usuario busca información concreta. Añadir desenfoque o desplazamiento ralentizaría el reconocimiento de las letras.
También conviene evitarla en textos legales, condiciones de compra y otros contenidos donde la claridad pesa más que la expresión visual.
Los botones pequeños presentan el mismo problema. La sombra en el texto compite con el fondo, el borde y los demás estados del componente. Si necesitamos elevar visualmente el botón, suele resultar más claro aplicar una sombra al contenedor mediante box-shadow que difuminar sus letras.
Las tipografías muy finas son especialmente sensibles. La sombra puede adquirir más presencia que el trazo original y modificar por completo el carácter de la fuente.
En interfaces densas, el efecto se suma a bordes, iconos, fondos, controles, etiquetas y estados. Incluso una sombra moderada puede aumentar una carga visual que ya era elevada.
La cuestión consiste en valorar la función del texto y el riesgo que tiene a perderla. Cuanto más pequeño, frecuente o crítico sea el texto, más limpio se tiene que mantener el contorno de las letras.
La sombra tampoco sustituye el contraste
Una sombra puede mejorar la separación de un texto sobre una fotografía, pero no cambia el contraste real entre el color de las letras y el color de fondo.
El fondo puede variar según el recorte, el contenido de la imagen, el tamaño de la pantalla o la posición del texto. Una sombra que funciona sobre una zona concreta puede resultar insuficiente unos centímetros más abajo.
Por eso tenemos que comprobar la composición completa y no limitar la revisión al valor de text-shadow.
Cuando el texto aparece sobre una imagen compleja, podemos combinar varios recursos:
- Elegir una zona más estable de la fotografía.
- Cambiar la posición del contenido.
- Aplicar un degradado o un velo de color.
- Colocar el texto sobre una superficie sólida o semitransparente.
- Ajustar el color y el peso de la tipografía.
- Utilizar una sombra sutil como refuerzo final.
La sombra funciona mejor cuando completa una estrategia de contraste que ya está bien planteada.
Cómo evaluar si una sombra funciona
Durante el proceso de diseño solemos observar los efectos con demasiado detalle. Ampliamos el lienzo, nos acercamos a la pantalla y dedicamos más atención a la sombra de la que le dedicará cualquier usuario.
Antes de darla por válida, conviene probarla en condiciones más cercanas al uso real.
Quita la sombra y compara
Esta es la comprobación más útil.
Crea una versión con sombra y otra sin ella. Si la legibilidad, la jerarquía y la identidad permanecen iguales, el efecto probablemente sobra.
También puede ocurrir que la versión sin sombra resulte más limpia. En ese caso, el efecto estaba empeorando una solución que ya funcionaba.
Observa el texto a su tamaño real
Un menú ampliado al 200 % puede parecer perfectamente legible. La sombra se convertirá en una mancha cuando lo veas al tamaño en el que aparecerá dentro de la web.
Comprueba la pieza dentro de la composición completa y desde una distancia normal de lectura.
Revisa el resultado en móvil
Al reducir el ancho, un titular puede cambiar de tamaño, dividirse en más líneas o aparecer sobre otra parte de la imagen.
La sombra también reduce su escala si utilizamos unidades relativas, pero la relación visual entre el efecto y los caracteres puede cambiar.
Prueba la composición en un dispositivo real y revisa especialmente los textos superpuestos a fotografías.
Aprende más sobre mi metodología Mobile Always para optimizar el diseño para móviles.
Comprueba distintos fondos
Una sombra oscura puede funcionar sobre una zona clara y crear un borde sucio sobre una zona oscura. Un resplandor claro puede mejorar el texto sobre negro y desdibujarlo al pasar sobre una superficie luminosa.
Cuando el fondo es variable, hay que comprobar varios escenarios y no únicamente la captura más favorable.
Aléjate de la pantalla
Observa la composición desde cierta distancia o desenfoca ligeramente la vista.
¿Percibes primero el texto o el efecto? ¿La sombra mantiene la forma de las letras o se convierte en una mancha alrededor de ellas?
Esta prueba ayuda a valorar la jerarquía general y a detectar efectos demasiado intensos.
Pregúntate qué problema resuelve
La respuesta debería ser concreta, como mejorar la legibilidad de un texto que está encima de una fotografía o construir el resplandor de un rótulo de neón.
Si solo la usas para que un texto «destaque más», quizá se pueda resolver mejor con más tamaño, más peso, otro color o una mejor posición dentro de la composición.
Si no puedes explicar qué aporta la sombra, probablemente solo esté decorando las letras. Y, en ese caso, sobra.
Cómo configurar text-shadow en WordPress 7.1
WordPress 7.1 reconoce la propiedad textShadow dentro de styles.typography en theme.json. El valor se transforma directamente en la propiedad CSS text-shadow, por lo que admite cualquier declaración válida, incluidas varias sombras separadas por comas.
Podríamos declararla globalmente, aunque nunca vamos a querer hacerlo:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"styles": {
"typography": {
"textShadow": "0.06em 0.06em 0.12em rgb(0 0 0 / 0.3)"
}
}
}Esta configuración aplicaría la sombra a toda la tipografía que herede los estilos globales. En la práctica, es difícil encontrar un sitio donde párrafos, títulos, enlaces, botones y etiquetas necesiten sombras.
También podemos limitarla a un bloque concreto:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"styles": {
"blocks": {
"core/heading": {
"typography": {
"textShadow": "0.06em 0.06em 0.12em rgb(0 0 0 / 0.3)"
}
}
}
}
}Este código aplicaría la sombra a los bloques de Encabezado. Sigue siendo una decisión muy amplia: afectaría tanto al gran título de una portada como a los encabezados internos de cualquier artículo o página.
La mayor parte de los usos razonables serán aplicaciones más concretas. Por ejemplo, un título de una landing page o un bloque diseñado para colocar texto sobre una fotografía.
La propiedad también puede utilizarse en estilos de elementos y estados como :hover. WordPress 7.1 incorpora esta capacidad dentro de la API de theme.json, aunque los controles visuales, los presets y la configuración de sombras en bloques individuales quedan para una versión posterior.
La sombra tiene que justificar su presencia
Una sombra puede hacer que se lea mejor un titular sobre una fotografía compleja. También puede construir el resplandor de un neón, un relieve, un desplazamiento cromático o cualquier otro efecto que forme parte de la identidad de la pieza.
Cuando el texto ya se lee bien y el efecto no refuerza un estilo concreto, la sombra añade una segunda forma que la composición no necesita.
En textos pequeños y funcionales, esa forma adicional puede difuminar los caracteres y ralentizar la lectura. En tipografías finas, puede ensuciar el trazado. En una interfaz densa, aumenta el ruido. Incluso en un titular grande puede resultar innecesaria si el fondo, el contraste y la jerarquía ya funcionan.
La incorporación de text-shadow a theme.json amplía las posibilidades tipográficas de WordPress: ahora podemos declarar sombras más fácilmente, pero recuerda tomar todas las decisiones de diseño con criterio.
Antes de conservar una sombra, quítala y compara. Si el texto pierde legibilidad o desaparece una parte importante de la identidad visual, la sombra estaba cumpliendo una función. Si todo sigue funcionando igual o incluso mejora, ya tienes la respuesta.
Te lo ha contado
Ana Cirujano
Soy diseñadora y ayudo a negocios online a fortalecer su marca, mejorar la experiencia de usuario y obtener mejores resultados.
