Visually adjust multi-layer text-shadow, neon glow radius, colors, and flashing rate, then copy CSS code.
/* CSS Code will be generated here */
Visually adjust multi-layer text-shadow, neon glow radius, colors, and flashing rate, then copy CSS code. Use it for everyday work, development, learning, or quick verification.
This tool runs in your browser. Before working with sensitive data, make sure you trust your browser and device environment.
This tool builds neon-sign style glowing text with CSS text-shadow. On the left you type the preview text and set the font size (20 to 100px), glow radius (2 to 30px), glow color and font style (Monospace, Sans-serif, Serif or Cursive). The preview updates live, and the CSS below is ready to copy. The default pink preset outputs .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; } plus a pulse animation.
The effect is three stacked text-shadow layers. The first is a 4px white glow that imitates the bright core of a neon tube. The second uses your color with the glow radius as its blur, and the third uses the same color at twice the blur to create the outer halo. The text itself is white, because the center of a real neon tube looks almost white and the color comes mainly from the surrounding glow. A larger radius gives a softer, wider halo, but on small text it quickly turns into a blur, so scale the radius down with the font size.
When Enable Pulse Animation is on, the CSS includes a @keyframes neon-pulse rule. Halfway through, the glow shrinks to half its size and opacity drops to 0.85, and the animation runs back and forth with alternate and ease-in-out, so the sign seems to breathe. Pulse Speed ranges from 0.5 to 4 seconds; lower numbers flicker faster. The four presets (Cyberpunk Pink, Aurora Green, Deep Ocean Blue with no pulse, and Sunset Glow Orange) set the color, radius, size and animation in one click.
Neon text works best on dark backgrounds; on white the halo almost disappears. Keep the pulse slow, since fast flashing can bother some users, and consider wrapping the animation in a prefers-reduced-motion media query so it can be turned off. text-shadow is plain CSS with no images or JavaScript, and every modern browser supports it. The copied class is called .neon-text; rename it and apply it to a heading or button.
It is built from several text-shadow layers: a small white blur for the tube's core and two colored blurs for the halo. This tool outputs 0 0 4px #fff, 0 0 [radius] [color], 0 0 [2 × radius] [color] and sets the text color to white.
The halo is a semi-transparent colored blur, so it has very little contrast against light backgrounds. Use black, navy or another dark background, or set the text color itself to the glow color.
Animating text-shadow makes the browser repaint repeatedly. That is fine for a heading or two, but many flickering elements can slow low-end devices. Rapid flashing can also bother light-sensitive users, so keep it slow and respect prefers-reduced-motion.
The tool offers four generic font families. To use a Google Font or your own typeface, copy the CSS and change font-family to that font name; the text-shadow and animation still work. Rounded or thin-stroke fonts usually look most like real neon tubing.
Browse this category: Design & Color
Extract colors from local images using a pixel-art style precision loupe. Support HEX, RGB, HSL copies and WCAG color contrast validation.
Visually configure and preview CSS Flexbox and Grid grid layouts, view animations, and copy CSS code.
Generate beautiful color schemes and export HEX/RGB values.
Clean and optimize SVG code locally with file size comparison and live preview.
