Amazing Neon Text Effect With CSS3

In this post we will discuss how to create an Amazing Neon Text Effect With CSS3.We are using CSS3 to achieve this.To create neon effect with the help of css3 we are using text-shadow attribute.

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Amazing Neon Text Effect With CSS3</title>
<style type="text/css">
body
{
margin:0px auto;width:900px;
background:#000;
font-family:Calibri;
}
#main{
width: 800px;
margin: 0 auto;
}
h2
{
color:white;
text-align:center
}
.neon{
text-align: center;
margin: 200px auto;
font-size: 100px;
text-transform: uppercase;
color: white;
text-shadow:0 0 10px white, 
  0 0 20px white, 
  0 0 30px white, 
  0 0 40px #3351ec, 
  0 0 70px #3351ec, 
  0 0 80px #3351ec, 
  0 0 100px #3351ec, 
  0 0 170px #3351ec;
}
</style>
</head>
<body>
<div id="main">
<h2>Amazing Neon Text Effect With CSS3</h2>
<h1 class="neon">
HighTechnology
</h1>
</div>
</body>
</html>