Result

以前かいたfilterを使う方法とは異なり、複数設定したグラデーションをkeyframesで動かす、というもの

css

.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;
	}
}

html

<div class="hero">
	<h1>foo bar</h1>
</div>

via

demo:Hero Image × CSS Gradient #2