CSS Neon Signs Text Effect

In the web design, sometimes we want our writing to look a little unique not just in general text. So today we will create a new text effect. That looks a lot like the colorful lights burning on the shop's signboard.

This effect is styled through CSS in such a way that it seems that the text is spreading light. We will make the text shining using a combination of color glow, shadow and brightness.

Not only that, we will add animation so that it will become more realistic.

HTML:

We will only create a span element with a 'text' class. HTML is the end here.

<span class="text">CSS Neon Signs</span>

Stylesheet (CSS):

Importing font:

Let us start by importing a font. First we will import the Sacramento Google Font. Sacramento is a cursive font, which looks a lot like logo on the shop signboard.

@import url('https://fonts.googleapis.com/css?family=Sacramento');

Centering text:

We brought the whole body to the center with the Flexbox method so that the text or content is always in the middle of the screen. Using MIN HEIGHT 100VH will take the height of the entire viewport. And with 'overflow' no additional part can be seen on the screen.

Now the real fun is the background image. Here we will use 'Repeating-Linear-Gradient'. This gradient has actually created a lot of retro Glychi TV scan line effects.

Transparent 7px means the first 7px place will remain blank. At the end of the transparent 13px, the cycle is finished.

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 give the text color hex code '#A9F4ff'. That means light blue light, which looks a lot like the signboard glow-light. For the font we have used 'Sacramento', which has been imported from Google Font. With Font Weight 600, we will show the text big and thick, so that the light is spreading.

The most interesting part is animation. A custom animation is used here. That we will define with @keyframes after this. Animation is blinking the text repeatedly, as it seems that the original NEON signboard is hanging on the wall and occasionally the light is teeming.

.text-effect{
    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;

}

Setting Up the Keyframes:

This time we will create a heartbeat of text. Keyframes 'animate' is the animation rule where the color of the text and the shadow are being changed. 20%, 24%, and 55% of the text will be black, and there will be no shadow. This means that the NEON sign has stopped in those moments.

Other times, such as 0%, 19%, 21%, 23%, 25%, 54%, 56%, and 100%, it will give light blue light again. And added text shadow.

Once everything happens, the text will look like the real neon sign, where the light sometimes goes down and burns.

@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;
    }
}

Are you interested in CSS art? We have drawn pictures of the elephant, fox etc. using only CSS properties. These tutorials will entertain you.

I hope you guys enjoyed this tutorial. If you have any suggestions and feedback to let me know through the comments below. Also, to stay updated with the latest tutorial, subscribe to me on Youtube.