Neon Light text Effect Css | text Effect Css

 Neon Light text Effect Css |  text Effect Css 

Neon Light text Effect Css |  text Effect Css


Welcome🎉 to codewithrandom blog in this blog we learn that how we Neon Light text Effect . We use HTML & css for this Neon Light text Effect.  Hope you enjoy our blog so let's start with a basic HTML structure for Neon Light text Effect.

HTML code for Neon Light text Effect

 <section>  
  <div class="container">  
   <h1 data-text="codewithrandom">codewithrandom</h1>  
  </div>  
 </section>  
There is all HTML code for Neon Light text Effect . Now you can see output without css then we write css for our Neon Light text Effect .
Neon Light text Effect Css |  text Effect Css

CSS for Neon Light text Effect

 @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600&display=swap");  
 * {  
  padding: 0;  
  margin: 0;  
  box-sizing: border-box;  
 }  
 html {  
  font-family: "Nunito";  
 }  
 :root {  
  --var-color: rgb(0, 238, 255);  
 }  
 section {  
  height: 100vh;  
  width: 100%;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  background-color: #09111b;  
 }  
 .container h1 {  
  font-size: 4.7rem;  
  color: var(--var-color);  
  position: relative;  
 }  
 .container h1::before {  
  position: absolute;  
  content: attr(data-text);  
  text-shadow: 0px 0px 20px var(--var-color);  
  filter: blur(10px) brightness(0);  
  animation: flicker 2s linear forwards;  
  animation-delay: 1s;  
 }  
 @keyframes flicker {  
  0% {  
   filter: blur(5px) brightness(1);  
  }  
  3% {  
   filter: blur(5px) brightness(0);  
  }  
  6% {  
   filter: blur(5px) brightness(0);  
  }  
  7% {  
   filter: blur(5px) brightness(1);  
  }  
  8% {  
   filter: blur(5px) brightness(0);  
  }  
  9% {  
   filter: blur(5px) brightness(1);  
  }  
  10% {  
   filter: blur(5px) brightness(0);  
  }  
  20% {  
   filter: blur(5px) brightness(1);  
  }  
  50% {  
   filter: blur(5px) brightness(1);  
  }  
  99% {  
   filter: blur(5px) brightness(0);  
  }  
  100% {  
   filter: blur(5px) brightness(1);  
  }  
 }  
Now we complete our css section,  Here is our updated output with css.


In this post, we learn how to create  Neon Light text Effect with simple coding of HTML & css . If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.

written by - codewithrandom/Anki 

Post a Comment

Previous Post Next Post