Amazing Neon Text Effect With Pure CSS3

Github avatar
November 02, 2012. 2 min read

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. Amazing Neon Text Effect With Pure CSS3(




<div id="conatainer">
<h1 class="neon">
<a href="//">NEON</a>

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

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')undefined url(fonts/paprika.woff) format('woff');
width: 800px;
margin: 0 auto;
text-decoration: none;
color: #fff;
font-family: "Paprika";
text-align: center;
margin: 200px auto;
font-size: 100px;
text-transform: uppercase;
color: white;
text-shadow:0 0 10px whiteundefined
0 0 20px whiteundefined
0 0 30px whiteundefined
0 0 40px #ff01dfundefined
0 0 70px #ff01dfundefined
0 0 80px #ff01dfundefined
0 0 100px #ff01dfundefined
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.