<h1 class="pink">neon pink</h1>
<h1 class="red">neon red</h1>
<h1 class="green">neon green</h1>
<h1 class="blue">neon blue</h1>
<h1 class="yellow">neon yellow</h1>
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
body{
background: #000;
font-family: 'Open Sans', sans-serif;
}
.neonshadow(@sh2: #FF00DE, @sh1: #FFFFFF){
color: @sh1;
text-shadow:
0 0 5px @sh1,
0 0 10px @sh1,
0 0 20px @sh1,
0 0 40px @sh2,
0 0 80px @sh2,
0 0 90px @sh2,
0 0 100px @sh2,
0 0 150px @sh2;
}
h1{
text-transform: uppercase;
text-align: center;
font-weight: bold;
font-style: italic;
font-size: 100px;
}
h1.pink{
.neonshadow();
}
h1.red{
.neonshadow(#F00);
}
h1.green{
.neonshadow(#0F0);
}
h1.blue{
.neonshadow(#00F);
}
h1.yellow{
.neonshadow(#FF0);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.