Diseña textos luminosos y letreros de neón personalizando colores, parpadeos y sombras con exportación de código CSS.
/* CSS Code will be generated here */
Diseña textos luminosos y letreros de neón personalizando colores, parpadeos y sombras con exportación de código CSS. Úsala para trabajo diario, desarrollo, aprendizaje o comprobaciones rápidas.
Esta herramienta funciona en tu navegador. Antes de usar datos sensibles, comprueba que confías en tu dispositivo y navegador.
Esta herramienta crea texto luminoso al estilo de un letrero de neón usando text-shadow de CSS. A la izquierda escribes el texto del letrero y ajustas el tamaño de fuente (20 a 100 px), la intensidad del brillo (radio de 2 a 30 px), el color del resplandor y el estilo tipográfico (Monospace, Sans-serif, Serif o Cursive). La vista previa se actualiza al instante y debajo aparece el CSS listo para copiar. La configuración inicial rosa genera .neon-text { color: #ffffff; font-family: sans-serif; font-size: 48px; text-shadow: 0 0 4px #fff, 0 0 10px #ff007f, 0 0 20px #ff007f; } más una animación de parpadeo.
El efecto se basa en tres capas de text-shadow. La primera es un brillo blanco de 4 px que imita el núcleo luminoso del tubo. La segunda usa tu color con el radio elegido como desenfoque, y la tercera repite el color con el doble de desenfoque para crear el halo exterior. El texto en sí es blanco, porque el centro de un tubo de neón real se ve casi blanco y el color proviene sobre todo del resplandor. Un radio mayor produce un halo más suave y amplio, pero en textos pequeños se vuelve borroso; reduce el radio cuando reduzcas la fuente.
Al activar el efecto de parpadeo luminoso, el CSS incluye una regla @keyframes neon-pulse: a mitad de la animación el brillo se reduce a la mitad y la opacidad baja a 0,85, y se reproduce en ambos sentidos con alternate y ease-in-out, como si el letrero respirara. La velocidad va de 0,5 a 4 segundos; cuanto menor el número, más rápido parpadea. Los cuatro temas prediseñados (Cyberpunk, Aurora Boreal, Océano profundo sin parpadeo y Atardecer retro) aplican color, radio, tamaño y animación con un clic.
El neón luce mejor sobre fondos oscuros; sobre blanco el halo casi desaparece. Mantén el parpadeo lento, porque los destellos rápidos pueden molestar a algunas personas, y considera desactivarlo con la media query prefers-reduced-motion. text-shadow es CSS puro, sin imágenes ni JavaScript, y funciona en todos los navegadores modernos. La clase copiada se llama .neon-text; cámbiale el nombre y aplícala a un título o un botón.
Se apilan varias sombras text-shadow: un desenfoque blanco pequeño para el núcleo del tubo y dos desenfoques de color para el halo. Esta herramienta genera 0 0 4px #fff, 0 0 [radio] [color], 0 0 [2 × radio] [color] y pone el texto en blanco.
El halo es un desenfoque de color semitransparente y casi no contrasta con fondos claros. Usa un fondo negro, azul marino u otro tono oscuro, o cambia el color del propio texto al color del brillo.
Animar text-shadow obliga al navegador a redibujar continuamente. Con uno o dos títulos no hay problema, pero muchos elementos parpadeando pueden ralentizar equipos modestos. Los destellos rápidos también pueden molestar a personas sensibles a la luz: usa una velocidad lenta y respeta prefers-reduced-motion.
La herramienta ofrece cuatro familias genéricas. Para usar una fuente de Google Fonts u otra propia, copia el CSS y cambia font-family por el nombre de esa fuente; las sombras y la animación siguen funcionando igual.
Ver esta categoría: Diseño y color
Extrae colores exactos píxel a píxel de cualquier imagen con lupa de alta precisión y genera la paleta dominante.
Configura y previsualiza maquetaciones CSS Flexbox y Grid visualmente, visualiza animaciones y copia el código CSS.
Genera combinaciones cromáticas armoniosas a partir de un color principal con exportación en HEX y RGB.
Optimiza y comprime código SVG localmente eliminando metadatos y etiquetas redundantes con vista previa.
