Texto de neón CSS
EstilosTodo se ejecuta en tu navegador: no se sube nada
La sensación de neón no sale de "añadir una sombra", sino de superponer varias capas de halo. Un tubo de neón real es una línea muy fina y muy brillante en el centro, rodeada de capas de luz que se difuminan hacia fuera. Por eso en CSS hay que escribir varias `text-shadow`: una pegada y de color sólido, y luego capas con el radio cada vez mayor y la opacidad cada vez menor; con tres o cuatro empieza a "brillar" de verdad. Con una sola sombra grande lo que se obtiene es un borrón: parece iluminado, pero no brilla. La intensidad es un solo parámetro que gobierna tres cosas: el número de capas, el radio de cada una y la opacidad de la más externa. No se ha separado en tres opciones para que las combines tú — la proporción entre las tres tiene que moverse a la vez para quedar bien; si las das por separado, la mayoría de la gente acaba con un borrón. La previa va sobre fondo oscuro, y es obligatorio: el neón se percibe por el contraste alto (letras luminosas sobre fondo oscuro), y sobre fondo claro el halo solo ensucia las letras. En un proyecto real pasa lo mismo: este efecto se usa casi siempre en interfaces oscuras.
Funciones
- Varias `text-shadow` superpuestas forman el halo; el número de capas y el radio siguen a la intensidad
- El color del tubo y el del texto se ajustan por separado — un blanco con algo del color principal se parece más al núcleo del tubo que el blanco puro
- La intensidad, de 0 a 100, gobierna capas, radios y opacidad de una vez
- Se previsualiza mientras escribes (la herramienta tiene un campo de texto)
- La previa va sobre fondo oscuro, así el contraste del neón funciona al instante
- Debajo aparece la regla CSS lista para copiar, con el selector `.neon`
- El código lleva coloreado de sintaxis y un botón de copiar
- Todo se calcula en tu navegador: no se sube nada
Cómo se usa
- Escribe unas palabras en el campo de arriba
- Elige el color del tubo y arrastra la intensidad para ver cómo se difunde el halo
- Si lo quieres más brillante, acerca el color del texto al blanco; si lo quieres más vivo, sepáralo del color del tubo
- Cuando te guste, copia el CSS
Preguntas frecuentes
- ¿Por qué una sola `text-shadow` no da sensación de neón?
- Porque el tubo de neón se percibe por un degradado de brillo: el centro es lo más luminoso y hacia fuera cae deprisa. Una sola sombra tiene un único radio y una única opacidad, así que o queda demasiado sólida (como un contorno) o demasiado difusa (como un borrón). Las capas superpuestas imitan justo esa curva de caída: una capa pegada opaca, una intermedia a medio camino y una exterior muy tenue — y el ojo lee "aquí hay un tubo que brilla", no "esta línea lleva contorno".
- ¿Por qué este efecto exige fondo oscuro?
- Por el contraste. El neón presupone una fuente de luz brillante en un entorno oscuro; sobre fondo claro el halo se mezcla con el fondo y las letras se ensucian y se emborronan. Para ponerlo sobre una interfaz clara habría que debilitar mucho el halo, y entonces ya no parece neón. Por eso la herramienta pone el fondo de la previa oscuro: no es decoración, es una de las condiciones para que el efecto funcione.
- ¿Afecta el texto luminoso a la accesibilidad?
- Sí, y hay dos puntos. Uno es el contraste: el halo difumina el borde de las letras y leer a tamaño de párrafo cansa, así que va bien en titulares, logotipos y texto decorativo, y mal en el cuerpo del texto. El otro es que las personas con trastornos visuales o migraña son sensibles a los brillos fuertes, y en el sistema hay una preferencia de "reducir movimiento" (`prefers-reduced-motion`) que no cubre un brillo estático; lo que sí puedes hacer es ofrecer un interruptor de "efecto atenuado" o quitar el halo en modo de alto contraste.
Herramientas relacionadas
Generador de degradados CSS
EstilosAjusta ángulo, colores y forma, mira la previa al momento y copia el CSS. Lineal, radial y cónico, con parada intermedia opcional.
Texto con efecto glitch
EstilosAjusta color e intensidad, mira el efecto glitch al momento y copia el CSS. Dos copias desalineadas con tiras recortadas, e instrucciones del data-text.
Conversor de color
ConversiónConvierte entre HEX, RGB, HSL, HWB, CMYK y los espacios Lab, OKLCH y XYZ, con temperatura de color, inverso, complementario, ANSI y contraste WCAG.
Generador de border-radius
EstilosAjusta el radio de las cuatro esquinas, prévisualo al momento y copia el CSS. Con px, rem y porcentaje: en una caja no cuadrada el porcentaje da elipse.
Generador de glassmorphism
EstilosAjusta desenfoque, opacidad, saturación y borde, mira el vidrio esmerilado al momento y copia el CSS, con el prefijo -webkit- para iOS.
Generador de neumorphism
EstilosAjusta distancia, desenfoque, intensidad y dirección, mira el neumorphism al momento y copia el CSS. Las dos sombras se derivan del fondo, mismo tono.