Generador de texto neón CSS
Crea texto con brillo de neón y copia el CSS al instante
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Esta herramienta permite diseñar un efecto de texto con brillo de neón viendo una vista previa en tiempo real y obtener el CSS listo para usar. Con controles deslizantes ajustas el color del brillo, el radio de desenfoque, el número de capas de resplandor, el tamaño de fuente y la animación de pulso, y el código CSS de text-shadow se actualiza al instante. Todo se procesa en el navegador, sin enviar el texto a ningún servidor, por lo que es ideal para prototipar banners, carteles o titulares de páginas de eventos.
Cómo usar
- Escribe tu texto en el campo de entrada.
- Elige un preset (cian, rosa, verde, dorado, morado) o define colores personalizados para el brillo interior y exterior.
- Ajusta el radio de desenfoque, el número de capas de brillo, el tamaño de fuente y la velocidad de la animación de pulso mientras observas la vista previa.
- Pulsa 'Copiar CSS' para obtener el código generado y pegarlo en tu proyecto.
Preguntas frecuentes
- ¿Dónde puedo usar el CSS generado?
- Es CSS puro basado en text-shadow y una animación @keyframes, así que puedes pegarlo en cualquier sitio web o proyecto HTML. El efecto se aprecia mejor sobre fondos oscuros.
- ¿Qué ocurre si desactivo la animación de pulso?
- Al desmarcarla se elimina el parpadeo de opacidad y text-shadow del @keyframes, y se genera un brillo neón estático sin propiedad de animación.
- ¿Puedo aumentar mucho el número de capas de brillo?
- Más capas dan un resplandor más rico, pero cada capa adicional de text-shadow aumenta el coste de renderizado, así que, como indica la propia herramienta, es mejor mantenerlas en 3-4 como máximo por rendimiento.