<div class="container">
<h1 class="neonText">
404
</h1>
<h2 class="neonText">Page Not Found</h2>
</div>
.neonText {
color: #fff;
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
0 0 42px #0fa,
0 0 82px #0fa,
0 0 92px #0fa,
0 0 102px #0fa,
0 0 151px #0fa;
}
h1 {
font-size: 4.2rem;
animation: flicker 1.5s infinite alternate;
}
/* Flickering animation */
@keyframes flicker {
0%, 18%, 22%, 25%, 53%, 57%, 100% {
text-shadow:
0 0 4px #fff,
0 0 11px #fff,
0 0 19px #fff,
0 0 40px #0fa,
0 0 80px #0fa,
0 0 90px #0fa,
0 0 100px #0fa,
0 0 150px #0fa;
}
20%, 24%, 55% {
text-shadow: none;
}
}
/* Additional styling */
h2 {
font-size: 1.8rem;
}
.container {
margin-top: 20vh;
}
body {
font-size: 18px;
font-family: "Helvetica Neue", sans-serif;
background-color: #010a01;
}
h1, h2 {
text-align: center;
text-transform: uppercase;
font-weight: 400;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.