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.
Now first we create the basic html for neon text effect :
That's it here the neon effect comes. Run The code and Enjoy!
<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