A pulsing neon sign made using many overlaid text-shadows.
A Pen by Thomas Trinca on CodePen.
<div id="container"> | |
<div class="neon">Neon </div> | |
<div class="flux">Flux </div> | |
</div> |
A pulsing neon sign made using many overlaid text-shadows.
A Pen by Thomas Trinca on CodePen.
html, | |
body { | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
height: 100%; | |
display: table; | |
background-color: black; | |
} | |
@font-face { | |
font-family: neon; | |
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf); | |
} | |
#container { | |
display: table-cell; | |
text-align: center; | |
vertical-align: middle; | |
} | |
.neon { | |
font-family: neon; | |
color: #FB4264; | |
font-size: 9vw; | |
line-height: 9vw; | |
text-shadow: 0vw 0vw 3vw #F40A35; | |
} | |
.neon { | |
animation: neon 1s ease infinite; | |
-moz-animation: neon 1s ease infinite; | |
/* Firefox */ | |
-webkit-animation: neon 1s ease infinite; | |
/* Safari and Chrome */ | |
-o-animation: neon 1s ease infinite; | |
/* Opera */ | |
} | |
@keyframes neon { | |
0%, | |
100% { | |
text-shadow: 0vw 0vw 1vw #FA1C16, 0vw 0vw 3vw #FA1C16, 0vw 0vw 10vw #FA1C16, 0vw 0vw 10vw #FA1C16, 0vw 0vw .4vw #FED128, .5vw .5vw .1vw #806914; | |
color: #FED128; | |
} | |
50% { | |
text-shadow: 0vw 0vw .5vw #800E0B, 0vw 0vw 1.5vw #800E0B, 0vw 0vw 5vw #800E0B, 0vw 0vw 5vw #800E0B, 0vw 0vw .2vw #800E0B, .5vw .5vw .1vw #40340A; | |
color: #806914; | |
} | |
} | |
@-moz-keyframes neon | |
/* Firefox */ | |
@keyframes neon { | |
0%, | |
100% { | |
text-shadow: 0vw 0vw 1vw #FA1C16, 0vw 0vw 3vw #FA1C16, 0vw 0vw 10vw #FA1C16, 0vw 0vw 10vw #FA1C16, 0vw 0vw .4vw #FED128, .5vw .5vw .1vw #806914; | |
color: #FED128; | |
} | |
50% { | |
text-shadow: 0vw 0vw .5vw #800E0B, 0vw 0vw 1.5vw #800E0B, 0vw 0vw 5vw #800E0B, 0vw 0vw 5vw #800E0B, 0vw 0vw .2vw #800E0B, .5vw .5vw .1vw #40340A; | |
color: #806914; | |
} | |
} | |
@-webkit-keyframes neon | |
/* Safari and Chrome */ | |
@keyframes neon { | |
0%, | |
100% { | |
text-shadow: 0vw 0vw 1vw #FA1C16, 0vw 0vw 3vw #FA1C16, 0vw 0vw 10vw #FA1C16, 0vw 0vw 10vw #FA1C16, 0vw 0vw .4vw #FED128, .5vw .5vw .1vw #806914; | |
color: #FED128; | |
} | |
50% { | |
text-shadow: 0vw 0vw .5vw #800E0B, 0vw 0vw 1.5vw #800E0B, 0vw 0vw 5vw #800E0B, 0vw 0vw 5vw #800E0B, 0vw 0vw .2vw #800E0B, .5vw .5vw .1vw #40340A; | |
color: #806914; | |
} | |
} | |
@-o-keyframes neon | |
/* Opera */ | |
@keyframes neon { | |
0%, | |
100% { | |
text-shadow: 0vw 0vw 1vw #FA1C16, 0vw 0vw 3vw #FA1C16, 0vw 0vw 10vw #FA1C16, 0vw 0vw 10vw #FA1C16, 0vw 0vw .4vw #FED128, .5vw .5vw .1vw #806914; | |
color: #FED128; | |
} | |
50% { | |
text-shadow: 0vw 0vw .5vw #800E0B, 0vw 0vw 1.5vw #800E0B, 0vw 0vw 5vw #800E0B, 0vw 0vw 5vw #800E0B, 0vw 0vw .2vw #800E0B, .5vw .5vw .1vw #40340A; | |
color: #806914; | |
} | |
} | |
.flux { | |
font-family: neon; | |
color: #426DFB; | |
font-size: 9vw; | |
line-height: 9vw; | |
text-shadow: 0vw 0vw 3vw #2356FF; | |
} | |
.flux { | |
animation: flux 2s linear infinite; | |
-moz-animation: flux 2s linear infinite; | |
/* Firefox */ | |
-webkit-animation: flux 2s linear infinite; | |
/* Safari and Chrome */ | |
-o-animation: flux 2s linear infinite; | |
/* Opera */ | |
} | |
@keyframes flux { | |
0%, | |
100% { | |
text-shadow: 0vw 0vw 1vw #1041FF, 0vw 0vw 3vw #1041FF, 0vw 0vw 10vw #1041FF, 0vw 0vw 10vw #1041FF, 0vw 0vw .4vw #8BFDFE, .5vw .5vw .1vw #147280; | |
color: #28D7FE; | |
} | |
50% { | |
text-shadow: 0vw 0vw .5vw #082180, 0vw 0vw 1.5vw #082180, 0vw 0vw 5vw #082180, 0vw 0vw 5vw #082180, 0vw 0vw .2vw #082180, .5vw .5vw .1vw #0A3940; | |
color: #146C80; | |
} | |
} | |
@-moz-keyframes flux | |
/* Firefox */ | |
@keyframes flux { | |
0%, | |
100% { | |
text-shadow: 0vw 0vw 1vw #1041FF, 0vw 0vw 3vw #1041FF, 0vw 0vw 10vw #1041FF, 0vw 0vw 10vw #1041FF, 0vw 0vw .4vw #8BFDFE, .5vw .5vw .1vw #147280; | |
color: #28D7FE; | |
} | |
50% { | |
text-shadow: 0vw 0vw .5vw #082180, 0vw 0vw 1.5vw #082180, 0vw 0vw 5vw #082180, 0vw 0vw 5vw #082180, 0vw 0vw .2vw #082180, .5vw .5vw .1vw #0A3940; | |
color: #146C80; | |
} | |
} | |
@-webkit-keyframes flux | |
/* Safari and Chrome */ | |
@keyframes flux { | |
0%, | |
100% { | |
text-shadow: 0vw 0vw 1vw #1041FF, 0vw 0vw 3vw #1041FF, 0vw 0vw 10vw #1041FF, 0vw 0vw 10vw #1041FF, 0vw 0vw .4vw #8BFDFE, .5vw .5vw .1vw #147280; | |
color: #28D7FE; | |
} | |
50% { | |
text-shadow: 0vw 0vw .5vw #082180, 0vw 0vw 1.5vw #082180, 0vw 0vw 5vw #082180, 0vw 0vw 5vw #082180, 0vw 0vw .2vw #082180, .5vw .5vw .1vw #0A3940; | |
color: #146C80; | |
} | |
} | |
@-o-keyframes flux | |
/* Opera */ | |
@keyframes flux { | |
0%, | |
100% { | |
text-shadow: 0vw 0vw 1vw #1041FF, 0vw 0vw 3vw #1041FF, 0vw 0vw 10vw #1041FF, 0vw 0vw 10vw #1041FF, 0vw 0vw .4vw #8BFDFE, .5vw .5vw .1vw #147280; | |
color: #28D7FE; | |
} | |
50% { | |
text-shadow: 0vw 0vw .5vw #082180, 0vw 0vw 1.5vw #082180, 0vw 0vw 5vw #082180, 0vw 0vw 5vw #082180, 0vw 0vw .2vw #082180, .5vw .5vw .1vw #0A3940; | |
color: #146C80; | |
} | |
} |