How to make a neon background with html and css without java script.

 How to make a neon background with html and css without java script.

Neon Image

Today we show you how to make a neon screen or background with html and css. Today in this article today we will discuss about it. And also I will provide you the source code so that you can understand easily.

If you are new to this blog of ours, then definitely share this article with your friends so that they can also help and do not forget to subscribe this blog.

In this you can change something according to you like hover effect time

HTML

       write a section tag with opening and closing tag.

       And write in section tag , span code mutltiples time 

  <section>

      <span> </span> 
       <span> </span> 
       <span> </span> 
       <span> </span> 
       <span> </span> 
       <span> </span> 
       <span> </span> 
       <span> </span> 
       <span> </span> 
       <span> </span> 
       <span> </span> 

      
  </section>

CSS

        *{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      
      }
      
      section{
          position: relative;
          width: 100%;
          height: 100vh;
          background: #001300;
          display: flex;
          flex-wrap: wrap;
          overflow: hidden;
          animation: changeColor 5s linear infinite;
      }
      
      @keyframes changeColor{
          0%
          {
              filter: hue-rotate(0deg);
          }
          100%
          {
              filter: hue-rotate(360deg);
          }
      }
      
      
      span{
          position: relative;
          width: 50px;
          height: 30px;
          display: block;
      }

    
      
      span::before{
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #00ff0a;
          transform: scale(0.1);
          box-shadow: 0 0 10px #0cf314,
          0 0 20px #00ff0a,
          0 0 40px #00ff0a,
          0 0 60px #429e45,
          0 0 80px #00ff0a,
          0 0 100px #00ff0a;
          border-radius: 50%;
          pointer-events: none;
          transition: 3s;
      
      }
      
      span:hover::before{
          transform: scale(6);
          transition: 0.1s;
      }
      
    

      
      .white{
          color: aliceblue;
      }
      
 
      

How to make responsive contact form from html and css

Change Time Duration

      /* span{
        position: relative;
        width: 40px;
        height: 40px;
        display: block;
    }
    
    span{
        position: relative;
        width: 40px;
        height: 40px;
        display: block;
    } */

    

Change Hover Duration

      /* 
span:hover::before{
    transform: scale(6);
    transition: 0.1s;
}

span:hover::before{
    transform: scale(2);
    transition: 0.1s;
}*/