Generador de sombra de texto CSS (text-shadow)

Cómo funciona

Indique el color de la sombra en una sola línea a la izquierda — HEX funciona, igual que rgb() o hsl(). Después trabaje con los cuatro controles: los dos desplazamientos fijan hacia dónde cae la sombra, el desenfoque define qué tan suave es su borde y la opacidad decide cuánto fondo se sigue viendo. Para un título con profundidad discreta, empiece con 2 píxeles de desplazamiento, 6 de desenfoque y 40 % de opacidad — el código queda 2px 2px 6px rgba(0, 0, 0, 0.4). Para un efecto neón, ponga los dos desplazamientos en 0, suba el desenfoque a 20-30 píxeles y elija un color brillante: la sombra se reparte pareja alrededor de cada letra y se ve como luz. Para un efecto grabado, baje el desenfoque a 0 y el desplazamiento a 1 píxel. El texto de muestra se redibuja con cada cambio; tome la regla terminada del panel derecho, y si necesita una imagen del efecto, el botón Descargar guarda un PNG de 1200×630 píxeles.

Esta herramienta también se busca como generador text shadow css, sombra de texto css, text shadow css, texto neon css, sombra para titulos css, text shadow ejemplos.

¿Qué es text-shadow?

La propiedad text-shadow pinta una sombra detrás de los caracteres de un texto. Sus valores son, en orden, un desplazamiento horizontal, uno vertical, un desenfoque opcional y un color; varios grupos separados por comas apilan capas de sombra sobre el mismo texto. La sombra sigue el contorno visible de cada carácter — se aplica a la forma de las letras, no al rectángulo del elemento. Ni el espacio que ocupa el texto ni el acomodo de las líneas cambian: un título gana profundidad sin que nada se mueva en la página.

¿Qué es Radio de desenfoque (blur)?

El radio de desenfoque es el tercer número: dice en cuántos píxeles el borde de la sombra se va difuminando hasta desaparecer. En 0 la sombra es una copia del texto con borde duro; a medida que el valor crece, la sombra se extiende, se ensancha y se aclara. Subir el desenfoque con los dos desplazamientos en 0 reparte la sombra pareja en todas las direcciones — esa es la base de los efectos neón y de brillo. El radio no puede ser negativo; por eso el control de esta herramienta empieza en 0.

¿Cuál es la diferencia entre text-shadow y box-shadow?

Las dos siguen la misma lógica de valores pero sombrean cosas distintas: text-shadow sigue el contorno visible de las letras, mientras que box-shadow se dibuja contra el rectángulo del elemento. Si le da box-shadow a un título, la sombra cae bajo la caja invisible que rodea el texto — no bajo las letras. La sintaxis también cambia: text-shadow no acepta valor de expansión ni conoce inset; a cambio, apilar capas es mucho más común con text-shadow, porque efectos como el neón y el grabado se construyen por capas. Regla práctica: text-shadow para letras, box-shadow para tarjetas y cajas.

La trampa del contraste: una sombra no rescata un texto ilegible

El mal uso más común de text-shadow es intentar arreglar con la sombra un contraste insuficiente. Una sombra oscura ayuda de verdad a un título blanco sobre una foto — pero las revisiones de accesibilidad (la relación de contraste WCAG) se miden entre el color del texto y el fondo, y la sombra no cuenta. Una combinación mal elegida de base, como texto claro sobre fondo claro, no se salva así: primero elija colores legibles y después sume la sombra como profundidad.

La segunda trampa es la sombra dura y totalmente opaca: desenfoque en 0, opacidad en 100 % y un desplazamiento grande hacen que la sombra parezca una segunda impresión del texto; en tamaños pequeños ese borde doble estorba mucho la lectura. La regla más segura: el texto de párrafo no lleva sombra — resérvela para títulos y elementos grandes.

¿Qué sombra de texto para cada caso?

Los mismos cuatro valores, en dosis distintas, producen efectos muy diferentes; el código sigue siempre el mismo patrón.

• Título blanco sobre una foto → 0 2 8 con 50-60 % de opacidad: el texto se despega de la imagen
• Profundidad discreta en un título → 2 2 6 con 30-40 %: se nota pero no grita
• Neón / brillo → 0 0 24 con un color vivo al 80-100 %: sin desplazamiento la sombra rodea cada letra
• Efecto grabado → 0 1 0 totalmente opaco: un píxel claro sobre fondo oscuro, uno oscuro sobre fondo claro

Preguntas frecuentes

¿En qué orden se leen los valores de text-shadow?

La lectura nunca cambia: primero el desplazamiento horizontal, luego el vertical, luego el desenfoque y al final el color. A diferencia de box-shadow no hay valor de expansión (spread) ni palabra clave inset — tras los tres números viene directamente el color. La regla generada escribe las cuatro partes completas; mueva el control que mueva, su número aparece en el código.

¿Puedo apilar varias capas de sombra sobre el mismo texto?

Sí: las capas se escriben una tras otra separadas por comas, y así se arma un neón completo — tres capas del mismo color con 10, 20 y 40 píxeles de desenfoque se superponen. Esta página escribe a propósito una sola capa para que la regla quede simple; para apilar, genere varios resultados con ajustes distintos y enlace usted mismo las partes con comas.

¿Qué contiene el archivo PNG descargado?

El texto de muestra con su sombra, en 1200×630 píxeles — útil para poner el efecto como imagen en una revisión de diseño o un mensaje. El código no está en el archivo: tómelo del panel derecho con el botón de copiar, donde queda listo tras cada cambio.

¿La sombra se ve igual en todos los navegadores?

La sintaxis de los valores es idéntica en todos los navegadores actuales y text-shadow tiene soporte desde hace muchos años. Aun así, la suavidad del desenfoque puede variar en matices entre motores de dibujo; en un diseño crítico conviene revisar el resultado una vez en el navegador de destino.