Este generador de sombras de texto en CSS permite diseñar y exportar efectos de sombra de texto desde el navegador sin escribir una sola línea de código.
Construye sombras visualmente. Modifique cada parámetro en tiempo real y observe la actualización de la vista previa al instante.
Qué puedes hacer:
- Agregue múltiples capas de sombras y apílelas para crear efectos complejos y multidimensionales
- Controle desplazamiento horizontal, desplazamiento vertical, desenfoque, extensión, opacidad y color por capa
- Arrastra y reordena las capas para cambiar cómo se apilan
- Elige entre 8 ajustes preestablecidos integrados que incluyen Neon Glow, Fire, Emboss, Retro Hard y más
- Pruebe tu diseño con cualquier color de fondo o un tablero de ajedrez (para pruebas de transparencia)
- Ajusta familia de fuentes, tamaño, peso, espaciado entre letras, altura de línea y color de texto
- Copia el resultado como una regla completa CSS, un valor
text-shadowsimple o una Tailwind clase arbitraria
El control deslizante de extensión simula un efecto de extensión CSS usando compensaciones de sombras en capas, ya que text-shadow no tiene soporte de extensión nativo.
Sin dependencias. Sin instalaciones. Pega el resultado directamente en tu hoja de estilo.
¿Qué es un generador de sombras de texto CSS?
Un generador de sombras de texto CSS es una herramienta basada en navegador que crea un valor de sombra de texto mediante controles deslizantes, selectores de color y una vista previa en vivo en lugar de sintaxis escrita a mano.
Se encuentra dentro del mundo más amplio de las herramientas css (EN), junto a generadores de degradados, bordes y animación.
Escribe un desplazamiento horizontal, un desplazamiento vertical, un radio de desenfoque y un color, y la herramienta generará el efecto en el texto de muestra en tiempo real.
Dos cosas separan a un generador de una página de referencia simple:
- Un panel de vista previa en vivo que se actualiza a medida que cambian los valores
- Un fragmento de código CSS listo para copiar, ya formateado y con sintaxis correcta
Nadie memoriza el orden exacto de desplazamiento-x, desplazamiento-y, radio de desenfoque y color en el primer intento. Esa es realmente la razón por la que existen estas herramientas.
¿Cómo funciona la propiedad CSS Texto-Sombra?
La propiedad text-shadow en css3 toma un valor separado por comas creado a partir de cuatro partes: desplazamiento-x, desplazamiento-y, radio de desenfoque y color.
Offset-x mueve la sombra hacia la izquierda o hacia la derecha. Offset-y lo mueve hacia arriba o hacia abajo.
Un valor negativo en cualquiera de los ejes invierte la dirección. Un desplazamiento-x positivo empuja la sombra hacia la derecha, uno negativo la tira hacia la izquierda.
Blur-radius controla qué tan suave se ve el Edge de la sombra.
Configúrelo en cero para obtener un duplicado del texto nítido y con bordes definidos. Empújelo más alto y el Edge se extiende y se desvanece, que es básicamente cómo se construye un efecto de brillo.
Las cuatro partes, en el orden requerido:
- desplazamiento-x (obligatorio)
- desplazamiento-y (obligatorio)
- radio de desenfoque (opcional, por defecto es 0)
- color (opcional, por defecto es currentColor)
Una sola sombra se ve así en una hoja de estilo:
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}MDN Web Docs (EN) enumera este mismo orden de cuatro partes en su referencia oficial. La especificación detrás de esto, mantenida por el CSS Grupo de Trabajo, es el CSS Módulo de Decoración de Texto Nivel 3 (EN).
La propiedad tiene una historia extraña. Apareció por primera vez en CSS2, se eliminó por completo de CSS2.1 y luego volvió a CSS3 bajo el mismo módulo de decoración de texto.
¿Cómo se superponen varias sombras de texto para obtener profundidad y brillo?
Varios valores de sombra de texto se apilan en una única lista separada por comas y cada uno se representa como su propia capa detrás del texto.
La primera sombra de la lista se encuentra más cerca del texto. Cada sombra escrita después se muestra más atrás, en el orden en que aparece.
Capas de profundidad
Efectos de profundidad utilizan varias sombras con un desplazamiento creciente y un color oscuro fijo, por lo que cada capa se apila un poco más lejos que la anterior.
text-shadow:
0.1em 0.1em 0 #ccc,
0.2em 0.2em 0 #999,
0.3em 0.3em 0 #666;Cada capa se encuentra un incremento más hacia afuera, que es lo que crea la apariencia escalonada y extruida.
Capas luminosas
Los efectos de brillo omiten el desplazamiento por completo y en su lugar acumulan desenfoque.
Un brillo de neón típico utiliza tres o cuatro sombras, todas en 0 0, con el radio de desenfoque aumentando en cada una y un color saturado como cian o magenta.
Algunos efectos van más allá con sombras en capas de colores contrastantes ligeramente separadas entre sí, que es la mecánica básica detrás del apariencia de texto con falla.
Apilar demasiadas capas ralentiza el repintado en dispositivos de menor potencia. La mayoría de los generadores limitan el recuento entre cinco y ocho sombras antes de que el efecto deje de valer la pena.
¿Qué formatos de color funcionan mejor en un valor de sombra de texto?
Text-shadow acepta los mismos formatos de color que el resto de CSS: hexadecimal, rgba y hsla.
| Formato | Ejemplo | Lo mejor para |
|---|---|---|
| Hex | #1a1a1a | Sombras planas y opacas |
| Rgba | rgba(0,0,0,0.6) | Bordes suaves y semitransparentes. |
| hsla | hsla(200,80%,50%,0.5) | Efectos de brillo basados en tonos |
Hex funciona bien cuando una sombra necesita permanecer completamente opaca, como una sombra paralela detrás de un encabezado.
Rgba agrega un canal alfa, y eso es lo que permite que una sombra se desvanezca en el fondo en lugar de quedarse ahí como un bloque plano de color.
Cambiar entre los dos es un trabajo de un solo paso con un convertidor de rgb a hexadecimal cada vez que un sistema de diseño le entrega una muestra hexadecimal y el generador quiere rgba.
Hsla se comporta como rgba pero expone el tono y la saturación directamente, lo que acelera el trabajo con neón o brillo ya que te deslizas por una rueda de colores en lugar de buscar muestras fijas.
Obtener un valor de una paleta basada en hsl a veces significa ejecutarlo primero a través de un convertidor de hsl a rgb.
El canal alfa está haciendo el verdadero trabajo aquí. Una sombra con opacidad total se ve plana y un poco artificial al lado de la misma sombra reducida a un 10 o 20% de transparencia.
CSS Sombra de texto, sombra de cuadro y filtro de sombra paralela: ¿cuál es la diferencia?
La sombra del texto sombrea los contornos de los glifos del texto mismo. Box-shadow sombrea el cuadro del elemento y el rectángulo que lo rodea.
La función filtro de sombra paralela (EN), definida en el CSS Módulo de efectos de filtro (EN), sigue la forma alfa real de cualquier cosa a la que se aplica, incluido el texto.
| Propiedad | Se aplica a | capas | Costo |
|---|---|---|---|
| sombra de texto | Contornos de glifos | Separados por comas, nativos | Bajo |
| sombra de caja | Cuadro de elementos | Separados por comas, nativos | Bajo a moderado |
| drop-shadow() | Forma alfa (imagen, SVG, texto) | Una sombra por llamada de filtro | Superior, dependiente de GPU |
Box-shadow ignora el texto por completo y sombrea el cuadro circundante, por lo que es la herramienta equivocada cuando el objetivo es sombrear formas de letras individuales. Ese trabajo pertenece a un generador de sombras de caja dedicado.
La sombra paralela puede envolver varios elementos o una imagen completa y aún así trazar la forma real dentro de ella, algo que ni la sombra del texto ni la sombra del cuadro pueden hacer.
La contrapartida es el costo de generación. La sombra paralela tiende a ser más pesada que la sombra de texto, ya que el navegador tiene que calcular la forma real en lugar de solo el cuadro o los contornos de los caracteres.
¿Qué navegadores admiten Text-Shadow y dónde están los límites de compatibilidad?
La compatibilidad con la sombra de texto en los navegadores modernos es efectivamente universal en este momento.
Cifras clave, por Can I Use (EN):
- Soporte completo en Chrome, Firefox, Edge y Safari en todas las versiones actuales
- Compatibilidad con Internet Explorer limitada a las versiones 10 y 11, sin compatibilidad con IE 5.5 a 9
- Opera Mini ignora por completo el valor del radio de desenfoque, por lo que las sombras se representan sin ningún desenfoque
Las brechas que quedan se encuentran casi en su totalidad en el software heredado. Es poco probable que cualquiera que construya a partir de una lista de navegadores actual se tope con un muro de renderizado.
Verificar el tráfico real de un proyecto con datos de compatibilidad entre navegadores (EN) todavía vale cinco minutos antes de enviar capas de sombras pesadas. Eso se duplica para una página de marketing pública en lugar de una herramienta interna.
Chrome DevTools hace que esto sea fácil de verificar con anticipación. Abre el inspector de estilo y modifique los valores de sombra en vivo con respecto a la página renderizada real.
¿Cuáles son las ventajas y desventajas de utilizar un generador de sombras de texto en lugar de escribir CSS a mano?
Un generador gana en velocidad. Escribir la misma sintaxis de cuatro partes de memoria, luego observar el desenfoque y desplazarlo hasta que se vea bien, lleva más tiempo que arrastrar tres controles deslizantes.
Ventajas del generador:
- Comentarios visuales instantáneos en lugar de un ciclo de guardar, actualizar y verificar
- No es necesario memorizar el orden de desplazamiento-x, desplazamiento-y y radio de desenfoque
- Los efectos en capas como brillo, neón o 3D se combinan sin prueba ni error
Contras del generador:
- Valores copiados y pegados sin una comprensión real de lo que hace cada número
- El código generado puede contener capas adicionales que un valor escrito a mano no necesitaría
- No le enseña cuándo text-shadow es en realidad la propiedad incorrecta a alcanzar
La codificación manual gana en un caso específico: una sombra única y simple en un título. Escribir text-shadow: 1px 1px 2px #000; lleva menos tiempo que abrir una pestaña del navegador.
La verdadera recompensa de un generador aparece una vez que un diseño requiere tres o cuatro sombras apiladas, donde ajustar manualmente cada compensación mediante prueba y error se vuelve tedioso rápidamente.
Esa ventaja de velocidad es realmente una ventaja de usabilidad (EN) más que de codificación. La herramienta elimina la fricción de una tarea que nunca fue técnicamente difícil, simplemente complicada.
¿Cómo se utiliza un generador de sombras de texto CSS, paso a paso?
Cada generador sigue aproximadamente el mismo flujo de trabajo, independientemente de cuál abra.
- Escribe o pegue el texto de muestra en el cuadro de vista previa
- Establece el desplazamiento horizontal y vertical con los controles deslizantes
- Ajusta el radio de desenfoque hasta que la suavidad del Edge se vea bien
- Elige un color de sombra y compárelo con el fondo real de la página.
- Agrega una segunda o tercera capa de sombra si el efecto necesita profundidad o brillo.
- Copia el fragmento de código CSS generado y péguelo en tu hoja de estilo
Un paso se omite más que cualquier otro: verificar la vista previa con el color de fondo real, no con el lienzo blanco predeterminado del generador.
Una sombra que se ve nítida en blanco puede desaparecer por completo en una imagen de héroe oscura o en un fondo de sección coloreado.
Pega el resultado en una hoja de estilo externa, o en un Sass parcial si tu proyecto ya usa uno, en lugar de un estilo en línea cada vez que el mismo efecto se repite en una página.
Es más fácil ajustar una regla más tarde que buscar cinco copias en línea dispersas en una plantilla.
¿Cómo se crean efectos de sombra de texto específicos (resplandor, neón, 3D, relieve)?
La misma sintaxis de cuatro partes produce resultados muy diferentes dependiendo de cómo se combinen el desplazamiento, el desenfoque y el color.
efecto neón
Texto de neón superpone tres o cuatro sombras con desplazamiento cero, aumentando el radio de desenfoque cada vez.
color: #fff;
text-shadow:
0 0 5px #0ff,
0 0 15px #0ff,
0 0 30px #0ff;El color del texto generalmente se establece cerca del blanco aquí, por lo que el brillo se lee como luz que se derrama hacia afuera en lugar de un contorno de color.
efecto 3D
El desplazamiento en capas crea una apariencia 3D: una sombra se repite varias veces, empujada por un píxel en cada repetición, el color se mantiene plano.
text-shadow:
1px 1px 0 #ccc,
2px 2px 0 #bbb,
3px 3px 0 #aaa;Peso de fuente importa aquí.
Una tipografía delgada se rompe bajo tantas capas apiladas. Un peso en negrita o negro mantiene la forma.
efecto de relieve
Emboss usa exactamente dos sombras en lugar de una pila: una sombra clara desplazada hacia arriba a la izquierda y una sombra oscura desplazada hacia abajo a la derecha.
| capa | compensación | Color |
|---|---|---|
| Resaltar | -1px -1px 0 | Gris claro o blanco |
| sombra | 1px 1px 0 | Gris oscuro o negro |
color: #888;
text-shadow:
-1px -1px 0 #fff,
1px 1px 0 #333;Este emparejamiento es la misma lógica claro-oscuro detrás del diseño neumorfismo (EN), solo que se aplica al texto en lugar de a un panel de interfaz de usuario.
Sólo se lee correctamente sobre un fondo de tono medio. En blanco puro o negro puro, una de las dos capas desaparece por completo.
¿Se puede animar la sombra de texto al pasar el cursor o en transición?
La sombra del texto se puede cambiar al pasar el cursor y los navegadores animarán el color y desenfocarán el radio suavemente entre dos estados.
El problema es el rendimiento. Text-shadow activa un repintado en cada fotograma que cambia, ya que el navegador tiene que recalcular los píxeles borrosos en lugar de simplemente reposicionar una capa.
El desglose ampliamente citado de Tobias Ahlin (EN) sobre la animación de sombras encontró que el mismo costo de repintado se aplica a box-shadow, y text-shadow comparte la misma ruta de renderizado.
Propiedades que evitan este costo:
- opacidad
- transformar
Ambos están acelerados por hardware y solo activan la composición, no un repintado completo.
Una solución alternativa común mantiene la sombra fija y cambia la opacidad del elemento que la lleva, de modo que se desvanece sin volver a pintar en cada fotograma.
En un solo encabezado o botón este costo es invisible. En una página que anima sombras a lo largo de una larga lista o una cuadrícula de tarjetas, es la diferencia entre una interacción fluida y una interferencia visible en dispositivos de menor potencia.
El movimiento más amplio a nivel de letra, del tipo que va más allá de un simple estado de desplazamiento, es en realidad una categoría propia. Se acerca más a animaciones de texto CSS (EN) que a un efecto de sombra estático.
¿Cuándo Text-Shadow no funciona o falla?
Text-shadow falla silenciosamente en algunas situaciones específicas y bien documentadas en lugar de generar un error.
Modo de colores forzados: Contraste alto de Windows y configuraciones similares a nivel de sistema fuerzan la sombra del texto a ninguna. La consulta de medios de colores forzados (EN) que detecta esto ha sido Línea base recientemente disponible desde septiembre de 2022 y ampliamente disponible desde marzo de 2025, según MDN.
La paleta elegida por el usuario la anula, y luchar contra esa anulación con más CSS anula el objetivo de la configuración de accesibilidad en primer lugar.
Hojas de estilo de impresión: la mayoría de los estilos de impresión de producción, incluido el patrón popularizado por HTML5 Boilerplate (EN), eliminan la sombra de texto y la sombra de cuadro con una regla de anulación general antes de que la página llegue al papel.
La tinta no difumina como lo hace una pantalla, por lo que la sombra simplemente se imprimiría como una mancha detrás de las letras.
Legibilidad de bajo contraste: un color de sombra demasiado cerca del fondo se traga el efecto y, a veces, el texto junto con él.
El WebAIM Million (EN) encontró el 83.9% de las páginas de inicio marcadas por texto de bajo contraste en 2026, frente al 79.1% en 2025. Un color de sombra mal elegido es una forma más de que el número suba en lugar de bajar.
WCAG 2.1 (EN) establece una relación mínima de contraste de color (EN) de 4.5:1 para texto normal. Una sombra que devora el contraste efectivo puede empujar un texto que de otro modo sería compatible debajo de esa línea.
Nada de esto significa evitar la sombra de texto. Significa tratarlo como una decoración superpuesta a un texto legible, de acuerdo con la práctica básica de accesibilidad web (EN), no como un reemplazo.
¿Qué errores comunes interrumpen la salida de sombra de texto generada?
La mayor parte de la salida de un generador de sombras de texto falla por una de tres razones predecibles, no por nada exótico.
| error | que pasa | Arreglar |
|---|---|---|
| Radio de desenfoque demasiado alto | Las formas de las letras se disuelven en una niebla | Reduzca el desenfoque al 20-30% del tamaño de fuente |
| Valores de compensación faltantes | La sombra se encuentra invisible detrás del texto. | Agregue al menos 1 px en cada eje |
| Copia parcial de un valor en capas | Sólo se representa una capa de sombra | Copia la cadena completa separada por comas |
Desenfoque demasiado alto es el más común. Un radio mayor que aproximadamente un tercio del tamaño de fuente deja de leerse como una sombra y comienza a leerse como niebla detrás de las letras.
Recortarlo entre un 20 y un 30% del tamaño de fuente normalmente restaura la forma sin perder la suavidad.
Offset-x y offset-y, ambos en cero, sin desenfoque, producen una sombra directamente detrás del texto donde las letras lo ocultan por completo.
Parece que la propiedad no hizo nada. En realidad, la sombra se representa exactamente como está escrita, simplemente apilada donde no se muestra nada.
El tercer error ocurre en el portapapeles, no en el código. Los valores de varias capas son cadenas largas separadas por comas y al copiar solo una parte de una se elimina cada capa después del corte.
Pega la cadena completa nuevamente en la vista previa del generador antes de enviarla. Eso es más importante cuando el valor llegó a través de un mensaje de chat o un documento de transferencia de diseño en lugar de una copia directa de la herramienta.
Preguntas frecuentes: Generador de text-shadow CSS
¿Cuál es la cantidad máxima de capas de sombra que representará un navegador?
Los navegadores colocan sin límite estricto en el número de sombras separadas por comas en un valor de sombra de texto.
El techo real es práctico: el costo de la pintura aumenta con cada capa, y la mayoría de los generadores lo limitan entre ocho y diez.
¿Text-Shadow admite transparencia alfa en todos los navegadores?
Sí. Todos los navegadores que admiten text-shadow también admiten los valores rgba y hsla en su interior, ya que la transparencia alfa es parte de la misma sintaxis de color.
La única excepción es Internet Explorer 9 y versiones anteriores, que nunca admitieron esta propiedad.
¿Se puede aplicar Text-Shadow a imágenes de fondo o solo al texto?
Text-shadow solo sombrea los glifos de los nodos de texto reales.
No tiene ningún efecto sobre las imágenes de fondo, las SVG formas o el cuadro de un elemento.
Para sombrear una imagen de fondo, se requiere el filtro de sombra paralela, que sigue la forma alfa real de la imagen en lugar de un cuadro delimitador.
¿La sombra de texto afecta el rendimiento de la página o el SEO?
Representar una sombra de texto estática no cuesta casi nada y no conlleva ningún impacto SEO directo, ya que los motores de búsqueda no analizan lo decorativo CSS como contenido.
La legibilidad importa más. Una sombra que reduce el contraste puede perjudicar la participación, que es una cuestión de usabilidad, no un factor de clasificación.
¿Se pueden reutilizar los valores generados como Sass Mixin o como clase de utilidad Tailwind o Bootstrap?
Sí. Un valor de sombra de texto generado cae en un Sass mixin como una variable, o una clase de utilidad Tailwind (EN) personalizada en el archivo de configuración.
Bootstrap (EN) se envía sin utilidad de sombra de texto, por lo que los proyectos necesitan una pequeña clase personalizada.
¿Qué debe comprobar antes de enviar un efecto de generador de sombra de texto CSS?
Un efecto de generador de sombra de texto CSS está listo para enviarse una vez que se haya verificado su comportamiento de renderizado, contraste y movimiento con el fondo real de la página.
Tres controles deciden la preparación, en orden:
- Contraste con el fondo real.
- Colores forzados y respaldo de estampados
- Representación en los navegadores que utiliza tu tráfico
Saltarse el orden importa menos que saltarse un paso, ya que una sombra que no pasa el contraste normalmente tampoco pasa las otras dos comprobaciones.
Una condición cambia este consejo: un brillo o pulso animado basado en el valor de la sombra ignora una señal de accesibilidad real sin un retroceso de movimiento.
prefers-reduced-motion (EN) ha sido compatible con todos los navegadores principales desde enero de 2020 y Baseline está ampliamente disponible desde julio de 2022, según MDN. Animar una sombra de texto sin verificarla cambia una demostración llamativa por una experiencia interrumpida para una parte de los visitantes.
El texto colocado sobre un panel translúcido necesita la misma disciplina de contraste, que es el punto de partida para un generador de morfismo de vidrio CSS.