Cómo se usa
- Escriba su texto en Texto de muestra. La vista previa lo muestra con la sombra, para que pueda juzgar el resultado con sus propias palabras.
- Ajuste el Desplazamiento horizontal (px), el Desplazamiento vertical (px) y el Difuminado (px) de la primera capa. Un desplazamiento vertical positivo baja la sombra.
- Elija el Color de la sombra y la Opacidad de cada capa, y añada más capas con Añadir una capa para un resplandor más suave.
- Copie la declaración CSS y péguela en la regla de su texto.
Cómo se construye el valor
La propiedad text-shadow admite una sombra o una lista de sombras separadas por comas. Cada sombra tiene sus desplazamientos horizontal y vertical y un radio de difuminado, que puede omitirse, y un color, que puede escribirse antes o después de las longitudes. La especificación CSS Text Decoration recoge la gramática. La primera sombra se dibuja encima de las demás, y sin sombra el valor es none.
Una sombra de texto no tiene extensión (spread), a diferencia de una sombra de caja. El radio de difuminado nunca es negativo, y un difuminado mayor extiende la sombra por una zona más ancha. La opacidad se escribe como el valor alfa de un color rgba, con dos decimales como máximo. Una longitud cero no necesita unidad, así que la herramienta escribe 0.
text-shadow: desplazamiento-x desplazamiento-y difuminado color, desplazamiento-x desplazamiento-y difuminado color, ...Capas y lo que comprueba el editor
Un resplandor suave suele usar dos o tres capas: una sombra pequeña y oscura cerca de las letras y otra más grande y clara más alejada. El editor admite hasta 8 capas, desplazamientos de -200 a 200 píxeles, un difuminado de 0 a 100 píxeles y una opacidad de 0 a 100 %.
Los colores de la vista previa, el del texto y el del fondo, son solo para la vista previa. No forman parte del CSS, así que la declaración contiene la sombra y nada más.
Ejemplo resuelto: una sombra negra bajo un resplandor azul
La primera capa tiene un desplazamiento de 0 y 2 píxeles, un difuminado de 4 píxeles y negro con una opacidad del 30 %. La segunda no tiene desplazamiento, tiene un difuminado de 12 píxeles y el azul #3b82f6 al 50 %.
El valor es 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5), y la declaración es text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5);
Preguntas frecuentes
¿En qué se diferencia el difuminado de una segunda capa?
El difuminado suaviza el borde de una sola sombra, así que se desvanece en una zona más ancha. Una segunda capa añade otra sombra con su propio desplazamiento, color y opacidad, que puede dibujarse en un lugar distinto de la primera.
¿Por qué los desplazamientos tienen signo?
Un desplazamiento horizontal positivo mueve la sombra a la derecha, y uno negativo a la izquierda. Un desplazamiento vertical positivo la baja, así que una sombra que cae debajo del texto tiene un valor positivo.
¿Puede una sombra de texto tener extensión?
No. La propiedad text-shadow admite solo un desplazamiento, un difuminado y un color. La sombra de caja tiene extensión, pero el texto no, así que el editor no la ofrece.
¿Por qué la vista previa se ve distinta de mi página?
La vista previa usa el texto de muestra, el tamaño y los colores que ajusta aquí. En su página la sombra cae sobre su propia tipografía, su tamaño y su fondo, así que compruebe el resultado en su sitio antes de terminar.
¿Se guarda o se envía a un servidor lo que escribo?
No. El texto de muestra, la vista previa y el CSS se generan en su navegador. No se guarda nada ni se envía a nuestro servidor, así que copie la declaración antes de salir de la página.
Fuentes
Cifras y texto revisados por última vez el martes, 10 de noviembre de 2026.