DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for CSS Neon Animation
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

CSS Neon Animation

Guys! Thank you all πŸ₯³, I've hit a 100 subscribers to my Newsletter and I'm over the moon!

It means a lot to me that people choose to read my articles and subscribe to receive my email every day, from the bottom of my heart: Thank you! 🧁

Therefore I wanted to make a cool 100 subs CSS neon animation to celebrate.

See below for what we'll be building today, this amazing CSS Neon Animation

HTML Structure

As for our HTML we need the following structure:

<div class="container">
  <div class="text">
    <b>100 s<span>u</span>bs</b>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

We are going to use the container to center everything and use the span to make a cool neon glitch.

CSS Neon

First we are going to import a cool Google font, which looks like it could be used in Neon letters.

@import url(//fonts.googleapis.com/css?family=Pacifico);
Enter fullscreen mode Exit fullscreen mode

The on to our Neon effect!

.text b {
  font: 400 25vh 'Pacifico';
  letter-spacing: -5px;
  color: #fee;
  text-shadow: 0 0px 10px, 0 0 1em #560a86, 0 0 0.5em #560a86, 0 0 0.1em #560a86,
    0 10px 3px #333;
}
Enter fullscreen mode Exit fullscreen mode

As you see, we are setting our font to be the Google Font, and making it a font-weight of 25vh (25% Viewport Height.

Then we are using the text-shadow to make it show as Neon. We add multiple glow "layers" and end with a dark grey to make it appear thicker.

Note: You can use a cool tool like this for creating text-shadows

CSS Neon Glitch Animation

We added a glitch on the u letter. This is common in Neon, and we can re-create this using CSS Animations.

.text b span {
  animation: flicker linear infinite 2s;
}

@keyframes flicker {
  75% {
    color: inherit;
    text-shadow: inherit;
  }
  76% {
    color: #222;
  }
  77% {
    color: inherit;
    text-shadow: none;
  }
  78% {
    color: inherit;
    text-shadow: inherit;
  }
  79% {
    color: #222;
    text-shadow: none;
  }
  80% {
    color: inherit;
    text-shadow: inherit;
  }
  90% {
    color: #222;
    text-shadow: none;
  }
  90.5% {
    color: inherit;
    text-shadow: inherit;
  }
}
Enter fullscreen mode Exit fullscreen mode

The actual animation is a mix of resetting the color and removing the text-shadow for a split second; this gives it the appeal of flickering.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (8)

Collapse
 
norrova profile image
Norro valentin

cyberpunk ambiant look very nice πŸ‘

Collapse
 
dailydevtips1 profile image
Chris Bongers Author

I sometimes wish I could make these cyberpunk renderings! love the colours 🀩

Collapse
 
tlylt profile image
Liu YongLiang

Futuristic vibeπŸŽ‰πŸŽ‰Congrats

Collapse
 
dailydevtips1 profile image
Chris Bongers Author

Hi Liu, thanks! Very grateful for this milestone 🀟

Collapse
 
cooljasonmelton profile image
Jason Melton

this is sweet!

Collapse
 
dailydevtips1 profile image
Chris Bongers Author

Hi Jason, thanks for the love buddy πŸ’™

Collapse
 
moonspwll profile image
Aleksei Kowalski

As a text it's cool, but as animation so-so

Collapse
 
dailydevtips1 profile image
Chris Bongers Author

Hey Aleksei, thanks! How could we enhance the animation more?
I tried with 2 letters blinking, but it turned out a bit "much"

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›