Neon Light Text Effect CSS3

Hey, Pixels! In this week’s video, neon-light-text-effect-css3.  This is super easy to create, so let’s jump right in.

What You’ll Need

The HTML

First, let’s code the HTML for our neon text. We’re going to use the <main> tag and then within this tag, we’ll write three h1’s with the class neon. I want each heading to have a name of a city, I’m going to choose Paris for the first heading, New York for the second, and Miami for the third and final heading. Each heading will also have its own color, so I’m going to add pink as a second class to the first heading, blue to the second, and green to the third heading. That’s all we need for our HTML section. Now, let’s head on over to our CSS file.



The CSS

The font we’ll use for our neon text is a Google Font called Londrina Outline. As you can see, I’ve already imported the font. Now, we’re going to style the body of our page by adding a black background and setting the font size to 16px.


@import url('https://fonts.googleapis.com/css?family=Londrina+Outline');
body {
    background: #000;
    font-size: 16px;
}

Now, we’re going to style the .neon class which applied to all three headings. We’re going to specify the font family we’ll use for our headings, which is Londrina Outline. We’ll also align the text to the center, transform it to uppercase, set font size to 8em, change its color to white and add .15em of letter spacing. Now, that we styled the general neon text, we’re going to add the colors to each heading individually.


.neon {
    font-family: 'Londrina Outline', cursive;
    text-align: center;
    text-transform: uppercase;
    font-size: 8em;
    color: #fff;
    letter-spacing: 0.15em;
}

First, we’ll select the pink class so that we can color our neon text, pink. We’re going to use the text-shadow property, set h-shadow and v-shadow to zero, but set the blur radius to 5px and add the pink hex color.


.pink {
    text-shadow: 
        0 0 5px #ff7bac,
        0 0 10px #ff7bac,
        0 0 20px #ff7bac,
        0 0 40px #ff7bac,
        0 0 80px #ff7bac,
        0 0 90px #ff7bac,
        0 0 100px #ff7bac,
        0 0 150px #ff7bac;
}

We’ll continue to add the property seven more times while gradually increasing the blur radius until we get our desired neon effect. Repeat this entire process with the .blue and .green class until all of our headings have this trendy neon text effect.


.blue {
    text-shadow: 
        0 0 5px #7bacff,
        0 0 10px #7bacff,
        0 0 20px #7bacff,
        0 0 40px #7bacff,
        0 0 80px #7bacff,
        0 0 90px #7bacff,
        0 0 100px #7bacff,
        0 0 150px #7bacff;
}
.green {
    text-shadow: 
        0 0 5px #7bffce,
        0 0 10px #7bffce,
        0 0 20px #7bffce,
        0 0 40px #7bffce,
        0 0 80px #7bffce,
        0 0 90px #7bffce,
        0 0 100px #7bffce,
        0 0 150px #7bffce;
}

Conclusion

There you have it! You’ve just created a trendy neon text effect using pure CSS3! Be sure to give this video a big thumbs up you liked it. Subscribe to XO PIXEL for more great design, code, and tech videos, just like this one. As always, thank you for watching. I’ll see you in the next video!

Like this article?

I'm a Content Creator, Front-End Web Developer, UI Designer, based in Toronto, Canada. I have a healthy addiction to the internet, technology, and digital media. I'm so passionate about all things design and tech that I write about it any chance I get on my blog xopixel.com!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.