Neon font with glowing text effect using HTML and CSS - Learn Program

 Neon font and glowing text effect 

Hii friends, i am created neon font and glowing text effect just using html and css. 

View code on Codepen : Neon font with glowing text

Html code

<link href='https://fonts.googleapis.com/css?family=Sacramento:400' rel='stylesheet' type='text/css'>

<h1 class="neonText">

 neon lights

</h1>

CSS Code

.neonText {

  color: #fff;

  text-shadow:

    0 0 7px #fff,

    0 0 10px #fff,

    0 0 21px #fff,

    0 0 42px #bc13fe,

    0 0 82px #bc13fe,

    0 0 92px #bc13fe,

    0 0 102px #bc13fe,

    0 0 151px #bc13fe;

}

  

body {

  font-size: 18px;

  font-family: "Sacramento", sans-serif;

  background-color: #010a01;

  display: flex;

  justify-content: center;

  align-items: center;  

}  

h1, h2 {

  text-align: center;

  font-weight: 400;

}

  

h1 {

  font-size: 6.2rem;

  animation: pulsate 1.5s infinite alternate;  

  border: 0.2rem solid #fff;

  border-radius: 2rem;

  padding: 0.4em;

  box-shadow: 0 0 .2rem #fff,

            0 0 .2rem #fff,

            0 0 2rem #bc13fe,

            0 0 0.8rem #bc13fe,

            0 0 2.8rem #bc13fe,

            inset 0 0 1.3rem #bc13fe; 

}

@keyframes pulsate {

    

  100% {

      text-shadow:

      0 0 4px #fff,

      0 0 11px #fff,

      0 0 19px #fff,

      0 0 40px #bc13fe,

      0 0 80px #bc13fe,

      0 0 90px #bc13fe,

      0 0 100px #bc13fe,

      0 0 150px #bc13fe;

  

  }

  

  0% {

    text-shadow:

    0 0 2px #fff,

    0 0 4px #fff,

    0 0 6px #fff,

    0 0 10px #bc13fe,

    0 0 45px #bc13fe,

    0 0 55px #bc13fe,

    0 0 70px #bc13fe,

    0 0 80px #bc13fe;

}

---

---

You can also see this post on Instagram

Instagram पर यह पोस्ट देखें

Learn Program (@learnprogram20)