<div class="container">
<p>Memento Mori</p>
</div>
body {
margin: 0;
height: 100vh;
}
.container {
font-family: sans-serif;
color: #3c3c3c;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
flex-direction: column;
}
@keyframes textShine {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
p {
font-size: clamp(2.8rem, 1.5vw, 3rem);
font-weight: bold;
margin: 5px;
background: linear-gradient(
to right,
#7953cd 20%,
#00affa 30%,
#0190cd 70%,
#764ada 80%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
background-size: 500% auto;
animation: textShine 5s ease-in-out infinite alternate;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.