<h1 class="boujee-text">Hello!</h1>
* {
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
background: hsl(0 0% 20%);
}
.boujee-text {
--bg-size: 400%;
--color-one: hsl(15 90% 55%);
--color-two: hsl(40 95% 55%);
font-family: sans-serif;
font-size: clamp(3rem, 25vmin, 8rem);
background: linear-gradient(
90deg,
var(--color-one),
var(--color-two),
var(--color-one)
)
0 0 / var(--bg-size) 100%;
color: transparent;
background-clip: text;
}
@media (prefers-reduced-motion: no-preference) {
.boujee-text {
animation: move-bg 8s linear infinite;
}
@keyframes move-bg {
to {
background-position: var(--bg-size) 0;
}
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.