Neon Buzzline

Neon sign text maker & LED phone marquee

Neon sign text maker

Type a few words, pick a tube colour and watch them light up on the wall. Save the sign as a PNG or SVG, or copy CSS that gives web text the same glow.

Neon sign: Open lateOpen lateOpen lateOpen lateOpen late

Sign size 744 × 318 px (the Large PNG is twice that)

Tube lettering
Tube colour
70%

A gentle dip in the glow, never more than twice a second. It stays off on devices set to reduce motion, and in the downloads for viewers who ask for that.

Wall

Show the CSS 
/* Neon sign: "Open late" in Tilt Neon, tube #ff3aa7, glow 70%. */
/* Tilt Neon is a free font (SIL Open Font License). Load it on your page first, or the fallback font is used. */
.neon-sign {
  display: inline-block;
  padding: 0.5em 0.8em;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: 1.18;
  text-align: center;
  color: #ffb3dd;
  text-shadow:
    0 0 0.018em rgba(255, 255, 255, 0.9),
    0 0 0.043em rgba(255, 255, 255, 0.5),
    0 0 0.047em rgba(255, 58, 167, 0.87),
    0 0 0.142em rgba(255, 58, 167, 0.77),
    0 0 0.271em rgba(255, 58, 167, 0.67),
    0 0 0.43em rgba(255, 58, 167, 0.57),
    0 0 0.614em rgba(255, 58, 167, 0.48);
  border-radius: 0.15em;
  border: 2px solid rgba(255, 255, 255, 0.32);
  background: linear-gradient(rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
}

/* The dark wall behind the sign. */
.neon-wall {
  padding: 2rem;
  text-align: center;
  background: #1c1012;
}

/* HTML: <div class="neon-wall"><p class="neon-sign">Open late</p></div> */

How to make your sign

  1. Type your words. Keep it short: two to four words read best, like a real shop sign.
  2. Pick the lettering. Tilt Neon and Exo 2 look like bent glass tubes, Monoton is retro, and Neonderthaw and Yellowtail are scripts.
  3. Choose a tube colour, then set the glow. Lower glow looks like a sign seen in daylight; higher glow lights up the wall around it.
  4. Add a backing board and a wall, or pick None for a transparent background.

Which download to use

The PNG is ready for social posts, slides, stream overlays and video thumbnails; with no wall, the glow fades into transparency so it sits on any dark background. The SVG stays sharp at any size and carries its font inside the file. Copy CSS gives you live, selectable text with the same glow for a web page.

More glowing tools

Lights for your phone and your web pages, all running in your browser.

Questions

Can I use the sign in my own projects?

Yes. The sign you make is yours. The five fonts are open-source: Tilt Neon, Monoton, Neonderthaw and Exo 2 use the SIL Open Font License and Yellowtail the Apache License, and both allow them in images, videos and web pages, including commercial ones.

Will the SVG look the same on another computer?

In web browsers, yes: the font is embedded in the file. Some design apps ignore embedded web fonts and swap in another one; install the free font there to edit the text.

Can a sign maker build this as a real neon sign?

Use it as a mockup to show what you want. The maker redraws the lettering as tube paths and prices it from the real size. Very thin or tightly joined script letters may be simplified, because glass and LED flex tubes can only bend so tightly.