Create Glow Flicker Using CSS

Hi my friends! Today we will use CSS to build a glow flicker animation. The term “glow flicker” refers to light flickering. It adds visual appeal to content on webpages. If you wanna learn more animation like this please visit our website.

Also read – Confetti Button Using JavaScript

Thus, we offer here a thorough explanation together with the source code to make this amazing glow flicker animation with HTML and CSS.

HTML for Glow Flicker

HTML is used to give a structure to our Flicker effect.

				
					<div id="text">
  <h1>O<span id="offset">P</span>EN</h1>
</div>

In the HTML Section

First, we create a div tag and give it the ID “text.”
Next, we set a “h1” tag inside the div tag.
Next, we set a span tag with the ID “offset” inside the “h1” tag.

As you can see in the HTML code we have added letters seperately. added offset in it, because we are gonna give it a seperate flickering animation which will flicker seperately.

Also for border we have code for flickering animation you will read it in further explaination.

CSS

In this section, we will create and animate our Glowing flicker. We separate the CSS codes into pieces so you can learn it quickly.

Import Font and Styling the Body

				
					@import url('https://fonts.googleapis.com/css?family=Raleway');
body {
  background-color:black;
}

In this case, we’ve brought in the ‘Raleway’ font from Google Fonts using “@import”. The HTML document’s main body is styled with a black background. we have used black background because the glowing effect is can be visible properly, like we se neon effect in light as same this animation gives same effect. Always remember the choice of font is very important, Also you can change the font if you want.

Styling Container (Div)

				
					div {
  text-align:center;
  position:absolute;
  border:5px solid #1086e8;
  width:300px;
  top:150px;
  border-radius:20px;
  left:50%;
  margin: -50px 0 0 -150px;
  animation: border-flicker 2s linear infinite;
}

Here, we create a “div” container with rounded corners, a solid blue border, full width, and center alignment. The “border-flicker” animation is made to flicker on the border by applying the main animation attribute to it. We have created border of 5px, solid and color for border is ‘#1086e8′(you can change the color if want)

#offset

				
					#offset {
  animation: letter-flicker 2s linear infinite;
}

The element with the ID “offset” now has the “letter-flicker” animation applied to it. The animation has a duration of two seconds (2s), uses a linear timing function, and never ends.

Styling the Heading

				
					h1 {
  color:#FF00E6;
  font-family: 'Raleway', sans-serif;
  font-size:64px;
  letter-spacing:10px;
  animation: text-flicker 3s linear infinite;
}

The header has been created with a pink color scheme, the ‘Raleway’ font, a font size of 64px, and a determined character spacing. The text flickers and a shadow effect is produced when the “text-flicker” animation is applied.

Border Flickering Animation

				
					@keyframes border-flicker {
  0% {
    opacity:0.1;
    -webkit-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
-moz-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
  }
  2% {
    opacity:1;
    -webkit-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
-moz-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
  }
  4% {
    opacity:0.1;
    -webkit-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
-moz-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
  }
  
  8% {
    opacity:1;
    -webkit-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
-moz-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
  }
  70% {
    opacity:0.7;
    -webkit-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
-moz-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
  }
  100% {
    opacity:1;
    -webkit-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
-moz-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
  }
}

The “border-flicker” animation, which adjusts the opacity and shadow properties to provide a flickering effect on the container border, is defined here. As we know we have to show border different from the text color that’s why we have given border different color(#1086e8). By adding this code we can see the border flicker Animation.

Text Flickering Animation

				
					@keyframes text-flicker {
  0% {
    opacity:0.1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  
  2% {
    opacity:1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  8% {
    opacity:0.1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  9% {
    opacity:1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  12% {
    opacity:0.1;
    text-shadow: 0px 0px rgba(242, 22, 22, 1);
  }
  20% {
    opacity:1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
  }
  25% {
    opacity:0.3;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
  }
  30% {
    opacity:1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
  }
  
  70% {
    opacity:0.7;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
  }
  
  72% {
    opacity:0.2;
    text-shadow:0px 0px 29px rgba(242, 22, 22, 1)
  }
  
  77% {
    opacity:.9;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
  }
  100% {
    opacity:.9;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
  }
}

The “text-flicker” animation’s mainframe, which regulates the text-shadow and heading’s overall opacity, is defined in this section.

Letter Flickering Animation

				
					@keyframes letter-flicker {
  0% {
    opacity:0.1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  2% {
    opacity:0.1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  4% {
    opacity:1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  
  
  19% {
    opacity:1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  21% {
    opacity:0.1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  23% {
    opacity:1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  
  80% {
    opacity:1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  83% {
    opacity:0.4;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  87% {
    opacity:1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
}

The mainframe for the “letter-flicker” animation is defined here. To create a flickering effect on different characters, we set keyframes at varying percentages of the animation duration, regulating text-shadow and opacity variables. As you seen in the output of code the individual code is flickering is because of this letter flickering code we have added.

See the Pen Glow Flicker by Kevin (@KevinOgden) on CodePen.

Code by – Kevin (Codepen Profile)

Conclusion

Here, you’ll understand how to use keyframe rules, HTML and CSS animations, and other techniques to create an amazing and eye-catching flicker light effect on any text. It is the most basic technique used to make websites look more appealing.

Also Use Our Online Code Editor Here –