<div class="hero">
<h1>foo bar</h1>
</div>
* {
margin: 0;
padding: 0;
}
.hero {
height: 100vh;
background: linear-gradient(
45deg,
rgba(255, 175, 189, 0.7),
rgba(100, 216, 243, 0.7),
rgba(234, 236, 198, 0.7),
rgba(245, 146, 176, 0.7),
rgba(52, 219, 216, 0.7)
)
0 0 / 1000% no-repeat,
url(https://picsum.photos/g/2000/1200) 0 0 / cover no-repeat;
animation: gradientAnimation 40s ease infinite;
}
@keyframes gradientAnimation {
0% {
background-position: 0% 30%, 0 0;
}
50% {
background-position: 100% 70%, 0 0;
}
100% {
background-position: 0% 30%, 0 0;
}
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font: normal 600 72px/1 "Open Sans", sans-serif;
text-align: center;
white-space: nowrap;
}
h1 span {
display: block;
margin-top: 1em;
font-size: 40px;
font-weight: 300;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.