<div class="container">
<span>W</span>
<span>E</span>
<span>L</span>
<span>C</span>
<span>O</span>
<span>M</span>
<span>E</span>
<span>!</span>
<span>W</span>
<span>3</span>
<span>C</span>
<span>P</span>
<span>L</span>
<span>U</span>
<span>S</span>
<span>.</span>
<span>C</span>
<span>O</span>
<span>M</span>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: "Exo", Arial, sans-serif;
background-color: #151522;
gap: 15px;
}
:root {
--hue: 10;
}
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 2vw;
}
span {
color: hsl(var(--hue) 80% 50%);
text-shadow: 1px 1px 0 hsl(calc(var(--hue) / 2) 80% 50%),
2px 2px 0 hsl(calc(var(--hue) / 3) 80% 50%),
3px 3px 0 hsl(calc(var(--hue) / 4) 80% 50%),
5px 5px 0 hsl(calc(var(--hue) / 5) 80% 50%),
6px 6px 0 hsl(calc(var(--hue) / 6) 80% 50%),
7px 7px 0 hsl(calc(var(--hue) / 7) 80% 50%),
8px 8px 0 hsl(calc(var(--hue) / 8) 80% 50%),
9px 9px 0 hsl(calc(var(--hue) / 9) 80% 50%),
10px 10px 0 hsl(calc(var(--hue) / 10) 80% 50%);
font-size: 5vw;
display: inline-flex;
}
span:nth-child(2) {
--hue: 20;
}
span:nth-child(3) {
--hue: 40;
}
span:nth-child(4) {
--hue: 60;
}
span:nth-child(5) {
--hue: 80;
}
span:nth-child(6) {
--hue: 100;
}
span:nth-child(7) {
--hue: 120;
}
span:nth-child(8) {
--hue: 140;
}
span:nth-child(9) {
--hue: 160;
}
span:nth-child(10) {
--hue: 180;
}
span:nth-child(11) {
--hue: 200;
}
span:nth-child(12) {
--hue: 220;
}
span:nth-child(13) {
--hue: 240;
}
span:nth-child(14) {
--hue: 260;
}
span:nth-child(15) {
--hue: 280;
}
span:nth-child(16) {
--hue: 300;
}
span:nth-child(17) {
--hue: 320;
}
span:nth-child(18) {
--hue: 340;
}
span:nth-child(19) {
--hue: 360;
}
span:nth-child(20) {
--hue: 380;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.