<p>neon<br/>lights</p>
<p>neon<br/>lights</p>
<p>neon<br/>lights</p>
body {
position: relative;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #222;
overflow: hidden;
p {
font-family: "Monoton", cursive;
font-size: 150px;
text-transform: uppercase;
text-align: center;
&:nth-child(1) {
position: absolute;
color: navajowhite;
top: 30%;
left: 50%;
transform: translate(calc(-50% - 3px), calc(-50% - 5px));
text-shadow: 1px 1px 2px black, 0 0 20px navajowhite, 0 0 5px #222;
}
&:nth-child(2) {
position: absolute;
color: palevioletred;
mix-blend-mode: darken;
top: 30%;
left: 50%;
transform: translate(calc(-50% - 6px), calc(-50% - 3px));
}
&:nth-child(3) {
position: absolute;
color: darkturquoise;
mix-blend-mode: color-burn;
top: 30%;
left: 50%;
transform: translate(calc(-50% - 9px), calc(-50% - 1px));
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.