How to Create CSS Neon Signs

Input Your Content

Start by typing your desired text into the main input field. You can use standard text or special characters.

• For multi-line signs, press Enter to create a new line.
• Use the "Vertical" toggle for Asian-style street signs.

Select Typography & Color

The font choice is crucial for realism. "Cursive" or "Script" fonts look like continuous glass tubes.

Click any color swatch to change the gas color. The "White" center of the text will remain, but the glow will change to your selected hue.

Export and Implement

Once you are happy with the preview, click the Copy CSS button. This copies the class definition to your clipboard.

How to paste into HTML:

<!-- 1. Add the font link in your head -->
<link href="https://fonts.googleapis.com..." rel="stylesheet">

<!-- 2. Paste the CSS in your style tag -->
<style>
  .neon-sign {
      /* Pasted code goes here */
  }
</style>

<!-- 3. Apply the class to your text -->
<h1 class="neon-sign">OPEN</h1>

Troubleshooting

If the glow doesn't look right on your website:

• Ensure your website background is Dark. Neon effects rely on "Screen" blending or additive color, which is invisible on white backgrounds.
• Check that you have imported the correct Google Font.