Generador de texto neón

Escribe un texto y consigue un letrero de neón, en PNG y en CSS

El generador de texto neón muestra tu texto como un letrero de neón colgado de una pared. Escribe el texto, elige el color del tubo y la fuente, y el letrero del escenario cambia al instante. Si activas el tubo de borde, un tubo rectangular de otro color brilla alrededor del texto. El botón de encendido apaga el letrero, y así lo ves también como se ve de día, con solo el color del tubo de cristal.

El letrero terminado se lleva de dos maneras. Guardar PNG crea una imagen con la pared incluida o una imagen solo con el brillo sobre fondo transparente. Copiar código te da un CSS que puedes pegar directamente en el título de una página web. El brillo del CSS son siete sombras de texto en unidades em, por lo que crece con el tamaño de la fuente, y el PNG vuelve a dibujar las mismas sombras en un lienzo, de modo que sale con el mismo brillo que la vista previa.

Cuándo usarlo

• Antes de decidir el texto de un letrero: mira primero, sobre una pared oscura, los saltos de línea, la fuente y la combinación de dos colores de tubo. Si apagas el letrero, ves cómo queda sin luz durante el día.
• Títulos brillantes para miniaturas y vídeos: deja la pared transparente y guarda en 1920×1080, y tendrás letras con brillo listas para subir a un editor de vídeo.
• Un título web con efecto neón: copia el código y pégalo. Como las sombras están en em, el brillo mantiene la proporción aunque cambies el tamaño del título.
• Invitaciones, carteles e imágenes de perfil: pon un mensaje de cumpleaños o el nombre de un negocio, con brillo, en un cuadrado de 1080×1080.

Cómo se hace

1. Texto: escribe hasta 3 líneas, con un máximo de 24 caracteres por línea. Si pulsas un letrero de ejemplo, el texto, el color y la fuente cambian a la vez.
2. Fuente: Tubo neón es una sans serif geométrica pensada para letreros y Neón manuscrito es una letra de mano enlazada con aspecto de neón. Ambas cubren las letras latinas y los números, con sus acentos; otros alfabetos se ven con la fuente del dispositivo.
3. Color del tubo: pulsa uno de los ocho colores de tubo o elige el que quieras en el círculo de color. El tubo de borde se activa por separado y puede llevar otro color.
4. Brillo, parpadeo y pared: el brillo va de 1 a 10, el parpadeo es Ninguno, A veces o Letrero averiado, y la pared es Ladrillo, Hormigón, Oscuro o Transparente.
5. Guardar: elige el tamaño del PNG y pulsa Guardar PNG, o llévate el CSS con Copiar código. Copiar enlace guarda los ajustes actuales detrás del # de la dirección y los abre otra vez tal cual.

El brillo del neón se construye con siete sombras

La propiedad text-shadow de CSS puede colocar varias copias desenfocadas de la forma de las letras debajo del texto. CSS Text Decoration 3 dice que los valores de sombra se interpretan como en box-shadow y que la primera sombra queda encima, y CSS Backgrounds 3 pide que el desenfoque se parezca a un desenfoque gaussiano cuya desviación estándar es la mitad del radio de desenfoque. Esta herramienta pone arriba dos sombras blancas y estrechas, y debajo cinco sombras de color cada vez más anchas, con lo que el tubo arde en blanco por el centro y reparte el color hacia fuera. Las letras se pintan con el color del tubo mezclado con un 78% de blanco.

Un em es el tamaño de fuente del propio elemento. Por eso el mismo código, en un título de 32px o en uno de 120px, da un brillo cuyo grosor sigue a las letras. Si fijas las sombras en px, el brillo se queda relativamente fino al agrandar el texto y tapa las letras al reducirlo.

Al cambiar el brillo, los radios de las cinco capas de color se multiplican por brillo ÷ 5, y las dos capas del núcleo blanco cambian menos, en 0,6 + 0,4 × (brillo ÷ 5). El gráfico del perfil del brillo en el área de trabajo muestra cuánta luz queda al alejarse del centro del trazo, para un solo trazo de 0.1em de grosor con las siete capas superpuestas.

Las sombras no afectan a la maquetación (CSS Text Decoration 3), así que hay que dejar espacio alrededor del título para lo que se extiende el brillo. Con un título de 64px y brillo 5, la luz se desborda algo más de 50px por arriba y por abajo.

El PNG vuelve a dibujar el mismo brillo en un lienzo

El estándar HTML define el desenfoque de la sombra de un lienzo como un desenfoque gaussiano cuya σ es la mitad del valor de shadowBlur. Es la misma relación que tiene el radio de desenfoque de CSS, así que esta herramienta dibuja las sombras con los mismos radios que el CSS (tamaño del texto × el valor en em), desde la capa de abajo hacia arriba, y pinta las letras al final. En el tubo de borde, las sombras exteriores se dibujan solo fuera de la caja y las interiores solo dentro, lo que da el mismo aspecto que box-shadow en CSS. Algunos navegadores limitan el desenfoque de las sombras del lienzo, así que en las capas muy anchas la herramienta dibuja en un lienzo más pequeño con un desenfoque proporcional y luego lo amplía, lo que mantiene la misma σ. Si guardas con la luz apagada, el PNG muestra el letrero apagado.

Los motivos de ladrillo y de hormigón son los de la vista previa, ampliados según el tamaño del texto, de modo que la composición que ves en el escenario es la que se guarda. Si eliges Transparente, se quitan la pared y la sombra de los bordes y solo quedan las letras y el brillo. El brillo es semitransparente, por lo que en un visor de imágenes con fondo blanco se ve tenue, pero sobre una foto o un vídeo oscuros se ve como en el escenario.

El parpadeo y el límite de fotosensibilidad

El criterio de éxito 2.3.1 de WCAG 2.2 exige que una página web no destelle más de tres veces por segundo, o que los destellos queden por debajo de los umbrales de destello general y de destello rojo. Allí, un destello es un par de cambios opuestos en que el brillo sube y baja un 10% o más de la luminancia relativa máxima, y el área se aproxima con un rectángulo de 341×256 píxeles en una pantalla de 1024×768, que representa un campo visual de 10 grados. Un letrero grande puede superar esa área, así que esta herramienta diseña el parpadeo para respetar el límite de número de veces sea cual sea el área.

El recuento toma como una sola cada caída en que el brillo (la opacidad) baja 0,1 o más y luego vuelve a subir 0,1 o más, encadena los ciclos repetidos uno tras otro y se queda con el mayor número encontrado en cualquier ventana de un segundo. El CSS que copias incluye una regla prefers-reduced-motion. MDN explica que esta característica de medios detecta si el dispositivo tiene activado el ajuste para reducir el movimiento que no es esencial, y a un visitante con ese ajuste el letrero le aparece encendido y sin parpadear. La vista previa y el encendido de esta área de trabajo tampoco se mueven con el mismo ajuste. Al encender la luz o cambiar de ejemplo o de parpadeo, el parpadeo se detiene al menos 1 s y vuelve a empezar desde el principio (tras un encendido, 0,6 s después de que termine), y el encendido se omite si el letrero estaba parpadeando, así que el momento del cambio tampoco pasa de 2 por segundo.

Los colores de los letreros de neón reales

Britannica explica que el gas neón puro da una luz naranja rojiza, y que otros gases y sus combinaciones dan otros colores. Si se añade vapor de mercurio al tubo, la luz es azulada. Todos se llaman letreros de neón, pero salvo el naranja rojizo, los colores no salen solo del neón. Los colores de tubo de abajo son valores elegidos en pantalla (sRGB), así que, si encargas un letrero real, compáralos con las muestras de color físicas del fabricante.

Color del núcleo de la letra = cada valor de rojo, verde y azul del color del brillo desplazado un 78% hacia el blanco (255). Ejemplo: en Rosa intenso, verde 45 → 45 + (255 − 45) × 0,78 = 208,8 → 209 (D1).

Errores frecuentes

• Fijar las sombras en px: en un título de otro tamaño, el brillo pierde la proporción. El código de esta herramienta usa em, así que solo hay que cambiar font-size.
• Usarlo tal cual sobre un fondo claro: el brillo es un color semitransparente y casi no se ve sobre blanco. Oscurece la zona detrás del título o ponlo sobre una franja oscura.
• Brillo cortado: las sombras no agrandan la caja del texto, así que si un elemento padre tiene overflow:hidden o no deja margen, el brillo se corta como con un cuchillo. Deja espacio según la distancia de alcance de la tabla de arriba.
• Esperar las fuentes neón en un alfabeto no latino: las dos fuentes neón solo contienen caracteres latinos, así que los demás alfabetos se sustituyen por la fuente por defecto. Para esos, compara con las fuentes sans serif y serif.
• Parpadear demasiado rápido: si editas tú mismo los keyframes y haces que el texto destelle más de tres veces por segundo, superas el límite de fotosensibilidad. Tampoco borres la regla de reducir movimiento.

Límites y precauciones

• El gráfico del perfil del brillo y las distancias de alcance son estimaciones para un solo trazo de 0.1em de grosor. Con trazos más gruesos o letras muy juntas, los brillos se superponen y se ven más intensos y más anchos.
• Sans serif, serif y monoespaciada se dibujan con fuentes instaladas en el dispositivo, así que su forma cambia de un dispositivo a otro, y el PNG se guarda con las fuentes del dispositivo que estés usando.
• El número de parpadeos es una estimación basada en los cambios de opacidad. WCAG juzga los destellos con la luminancia relativa y el área de la pantalla real, así que en una pantalla grande es más seguro usar el letrero sin parpadeo.
• No se calculan el tamaño, la longitud del tubo, el precio ni el consumo eléctrico de un letrero real.

Referencia: el 2026-10-20 se comprobaron las frases correspondientes de los estándares y documentos de abajo. Los números de las tablas son los mismos que calcula esta herramienta.

Fuentes

• 01W3C — CSS Backgrounds and Borders Module Level 3Desenfoque de box-shadow: cercano a un desenfoque gaussiano con desviación estándar igual a la mitad del radio de desenfoque (dentro del 5% por píxel)
• 02W3C — CSS Text Decoration Module Level 3, text-shadowLos valores se interpretan como en box-shadow, la primera sombra queda encima, las sombras no afectan a la maquetación ni al área de desplazamiento
• 03WHATWG — HTML Living Standard, sombras del lienzoDesenfoque gaussiano 2D con σ igual a la mitad de shadowBlur
• 04W3C — WCAG 2.2, 2.3.1 Umbral de tres destellos o menosNo más de tres destellos en cualquier segundo, definición de destello general (10% de la luminancia relativa máxima, 0,80), aproximación de 341×256 píxeles
• 05MDN — prefers-reduced-motionCaracterística de medios que detecta si el dispositivo tiene activado el ajuste para reducir el movimiento no esencial
• 06Britannica — Neon lampEl neón puro da luz naranja rojiza, otros gases y combinaciones dan otros colores, el vapor de mercurio da luz azulada
• 07Google Fonts — Tilt NeonAndy Clymer, tipografía inspirada en las letras de los rótulos de tiendas, OFL
• 08Google Fonts — NeonderthawRobert Leuschke, letra manuscrita de un solo grosor que imita el neón, OFL
• 09SIL — OFL FAQ1.1 Uso en trabajos de diseño como logotipos, carteles y rotulación sin permiso adicional

Preguntas frecuentes

Herramientas para usar con esta