HTML

<p><span class="text-animate">Super Cool</span></p>

Copy code

CSS

.text-animate {
text-transform: uppercase;
background-image: linear-gradient(-225deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background-size: 200% auto;
color: #fff;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textclip 2s linear infinite;
display: inline-block;
}

@keyframes textclip {
to {
background-position: 200% center;
}
}

Copy code

HTML

<p class="text-wavy">
<span style="--i: 1;">Y</span>
<span style="--i: 2;">O</span>
<span style="--i: 3;">U</span>
<span style="--i: 4;">R </span>
<span style="--i: 5;">G</span>
<span style="--i: 6;">A</span>
<span style="--i: 7;">M</span>
<span style="--i: 8;">E </span>
<span style="--i: 9;">H</span>
<span style="--i: 10;">E</span>
<span style="--i: 11;">R</span>
<span style="--i: 12;">E</span>
</p>

Copy code

CSS

.text-wavy {
position: relative;
-webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));
font-size: 60px;
}
.text-wavy span {
position: relative;
display: inline-block;
color: #fff;
text-transform: uppercase;
animation: wavy 1s infinite;
animation-delay: calc(.1s * var(--i));

}
@keyframes wavy {
0%,40%,100% {
transform: translateY(0)
}
20% {
transform: translateY(-20px)
}
}

Copy code

HTML

<p class="text-title">
<span class="title-word title-word-1">Your</span>
<span class="title-word title-word-2">Game</span>
<span class="title-word title-word-3">Name</span>
<span class="title-word title-word-4">Here</span>
</p>

Copy code

CSS

.title-word {
animation: color-animation 4s linear infinite;
}

.title-word-1 {
--color-1: #DF8453;
--color-2: #3D8DAE;
--color-3: #E4A9A8;
}

.title-word-2 {
--color-1: #DBAD4A;
--color-2: #ACCFCB;
--color-3: #17494D;
}

.title-word-3 {
--color-1: #ACCFCB;
--color-2: #E4A9A8;
--color-3: #ACCFCB;
}

.title-word-4 {
--color-1: #3D8DAE;
--color-2: #DF8453;
--color-3: #E4A9A8;
}

@keyframes color-animation {
0% {color: var(--color-1)}
32% {color: var(--color-1)}
33% {color: var(--color-2)}
65% {color: var(--color-2)}
66% {color: var(--color-3)}
99% {color: var(--color-3)}
100% {color: var(--color-1)}
}

Copy code

Email iMajin to get started today!