Amazing Neon Text Effect With Pure CSS3

Published on November 2, 2012

Hi guys how you doing? From last few days I have been busy with my Exams. Finally I got time today to write this post. Today I will show you how to create neon text effect with PURE CSS3. Olden days designers used to develop such kind of effect with PhotoShop. But now CSS3 make this easy. In this post you can learn how to use multi text-shadow CSS3. You can have the look at the demo below.

Demo

Download

HTML

<html>
  <body>
    <div id="conatainer">
      <h1 class="neon">
        <a href="//techumber.com">NEON</a>
      </h1>
    </div>
  </body>
</html>

Here we are going to apply neon effect on text NEON. Style

body {
  background: #000;
}
@font-face {
  font-family: 'Paprika';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/paprika.eot);
  src: url(fonts/paprika.eot) format('embedded-opentype'), url(fonts/paprika.woff) format('woff');
}
#container {
  width: 800px;
  margin: 0 auto;
}
a {
  text-decoration: none;
  color: #fff;
  font-family: 'Paprika';
}
.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 #ff01df, 0 0 70px #ff01df, 0
      0 80px #ff01df, 0 0 100px #ff01df, 0 0 150px #ff01df;
}

Here we using custom font paprika you can found it in download under fonts folder. Here the Important code is .neon class. In this we are using CSS3 property text-shadow with multiple values. How text-shadow works text-shadow:alpha beta gama delta; alpa=Horizontal offset(X-Coordinate) beta=Vertical offset(Y-Coordinate) gama=bluer value delta=color code

That’s it. This is very small and simple code. It will be very useful if you want to create your logo with this effect.