On websites, we sometimes want our text to look a little more unique than regular text.
So today, we will create a neon sign text effect - a bright style that looks just like the bright lights of a storefront sign.
This effect is created using CSS, which gives the text a glowing effect. We also added a flickering animation. As a result, the text looks like a real neon sign.
Table of Content
Project Folder Structure:
Before we start coding the Neon Signs Effect, create a folder for the project. Inside that folder, make two files named index.html and style.css - these will be your HTML document and stylesheet.
If you are still having trouble setting up your project, check out our detailed guide on How to Structure an HTML Project to learn the proper folder setup.
HTML:
We will just create a span element with a text class—that's enough for the HTML part!
<span class="text">CSS Neon Signs</span>Live Demo:
Below is a live demo to help you see how the neon signs text look. Click "Run Code" to see the neon signs effect live.
Stylesheet (CSS):
Importing font:
Let us start by importing a font. We will use the Sacramento font from Google Fonts—it's a beautiful cursive style that looks just like the writing on a store sign.
@import url('https://fonts.googleapis.com/css?family=Sacramento');Centering text:
We centered the entire body using the flexbox method so that the text always stays perfectly in the middle of the screen. We also used overflow to make sure no extra parts appear outside the visible area.
Now comes the fun part—the CSS background-image property! Here, we will use the repeating-linear-gradient property, which creates a cool retro effect. It will look like the old glitchy TV scan lines on a vintage screen.
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
background: #222;
background-image: repeating-linear-gradient(
to bottom,
transparent 7px,
#000000cc 9px,
#000000cc 13px,
transparent 13px);
}Styling Text:
We will set the text color to #A9F4FF, which gives off a soft blue glow—similar to the light on a real neon signboard. For the font, we will use Sacramento, imported from Google Fonts. By setting the font-weight to 600, the text will appear bold.
.text{
color: #a9f4ff;
font-family: 'Sacramento', cursive;
font-size: 120px;
font-weight: 600;
text-align: center;
text-transform: capitalize;
margin: 20px auto 0;
animation: animate 2s ease-in-out infinite;
}The most exciting part is the animation. Here, we will create a custom animation using @keyframes. This animation makes the text blink repeatedly, giving the impression that the neon sign is hanging on a wall and flickering from time to time.
Setting Up the Keyframes:
Now, we will create a heartbeat effect. Here, the @keyframes animate rule will change the color and shadow.
At 20%, 24%, and 55%, the text will turn black and lose its shadow—making it look like the neon sign has turned off.
At other times—0%, 19%, 21%, 23%, 25%, 54%, 56%, and 100%—the text will glow in a soft blue light again and a text-shadow will be applied. With these changes, the text creates a realistic neon shimmer.
@keyframes animate{
20%, 24%, 55%{
color: #111;
text-shadow: none;
}
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
color: #a9f4ff;
text-shadow: 0 0 5px #000cff,
0 0 15px #0052ff,
0 0 20px #00c8ff,
0 0 40px #008dff,
0 0 60px #000cff,
0 0 10px #00ffb4,
0 0 98px #0000ff;
}
}That’s it for today’s Neon Signs Text Effect tutorial. I hope you had fun experimenting with those glowing styles. If you have any questions or want to share your neon creations, drop a comment below—I'd love💗 to see them.
For more web design tips and CSS tricks, make sure to follow our Youtube channel. Thanks for watching - stay creative! Namaste 🙏
0 Comments