Ads (728x90)

Techonlogy

Subscribe Here

Sponsor

Social Share

Recent

Business

Video

Gallery

videos

Firstly how to create a neon text effect.Neon text  is accomplished by utilizing the CSS3 property "text shadow" on multiple layers  and a saturated shadings.

How to create a simple Neon text effect in CSS3
Now first we create the basic html for neon text effect :

<html>
  <head>
    <title>Neon Text Effect</title>
  </head>
  <body>
    <div id="container">
      <h1 class="neon">Hubkart</h1>
    </div>
  </body>
</html>
Now we put some css for the effect.The most imperative part here is the "text shadow" - We won't utilize it for a real shadow yet for the glow effect of the text. Every value in the line represents the each radius to glow.

.neon
{
    font-size:60px;
    background-color:black;
    color:White;
    padding:30px;
      text-shadow: 0 0 10px #5b5ed4,
                   0 0 20px #5b5ed4,
                   0 0 30px #5b5ed4,
                   0 0 40px #3c589b,
                   0 0 70px #3c589b,
                   0 0 80px #3c589b,
                   0 0 100px #3c589b,
                   0 0 150px #3c589b;
}

That's it here the neon effect comes.  Run The code and Enjoy!

Post a Comment