ヒーローイメージとはファーストビューでドーンと表示される大きなイメージのことで、海外だけでなく国内でも取り入れているサイトを見かけることが多くなってきました。
そんなヒーローイメージにCSSで実装したグラデーションを組み合わせたサンプルです。

グラデーションを重ねる

グラデーションを重ねる実装イメージ

単純に画面いっぱいに表示した背景画像の上にグラデーションを重ねたものです。
HTMLは.heroを指定したdiv要素のみを使用し、CSSは下記のように記述します。

.hero {
  height: 100vh;
  background: linear-gradient(-45deg, rgba(229,93,135,.7), rgba(95,195,228,.7)), url(background.jpg) center center / cover no-repeat;
}

実際の表示は以下で確認できます。

アニメーションするグラデーションを重ねる

アニメーションするグラデーションを重ねる実装イメージ

先ほどと同様で画面いっぱいに表示した背景画像の上にグラデーションを重ねたものですが、そのグラデーションにアニメーションを加えたものなり、デモで実際の動きを確認してもらうとグラデーションカラーが変化していくのを確認できます。
HTMLは同じく.heroを指定したdiv要素のみを使用し、CSSは下記のように記述します。

.hero {
  height: 100vh;
  background: linear-gradient(45deg, rgba(255,175,189,.7), rgba(100,216,243,.7), rgba(234,236,198,.7), rgba(245,146,176,.7), rgba(52,219,216,.7)) 0 0 / 1000% no-repeat, url(background.jpg) 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;}
}

複数のカラー(今回のサンプルでは5カラー)を用いたグラデーションを用意し、あとはanimationを使ってbackground-positionの値を変更していくことでグラデーションカラーが変化していくように見せることができます。
また、linear-gradientのカラー数や角度、animation-durationの値(上記ソースで40sと指定している部分)などを調整することでいろいろな見せ方もできます。

実際の表示は以下で確認できます。

ブレンドモードを使う

ブレンドモードを用いた実装イメージ

こちらも画面いっぱいに表示した背景画像の上にグラデーションを重ねたものなのですが、そこにブレンドモードを組み合わせることでまた違った見た目にすることができます。
HTMLは同じく.heroを指定したdiv要素のみを使用し、CSSは下記のように記述します。

.hero {
  height: 100vh;
  background: linear-gradient( cyan, transparent), linear-gradient( -45deg, magenta, transparent), linear-gradient( 45deg, yellow, transparent), url(background.jpg) center center / cover no-repeat;
  background-blend-mode: multiply;
}

今回のサンプルではmultiplyを使用しましたがbackground-blend-modeは全部で15種類あるので、いろいろ組み合わせてみると面白い見た目を発見できるかもしれませんね。

実際の表示は以下で確認できます。

霧がかかったような見栄え

霧がかかったような見栄えの実装イメージ

実際にデモを見てほしいのですが、アニメーションするグラデーションを重ねたものと同じような感じで、少し透過したグラデーションにアニメーションを加えることで霧がかかっているような見栄えにする方法です。
HTMLは同じく.heroを指定したdiv要素のみを使用し、CSSは下記のように記述します。

.hero {
  height: 100vh;
  background: url(background.jpg) center center / cover no-repeat;
}
.hero::before,
.hero::after {
  position: absolute;
  top: 0;
  z-index: 2;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
}
.hero::before {
  right: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(255,255,255,0)) 0 0 / 300% no-repeat;
  animation: misty1 30s ease infinite alternate;
}
.hero::after {
  left: 0;
  background: linear-gradient(-90deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0)) 0 0 / 150% no-repeat;
  animation: misty2 15s ease infinite alternate;
}
@keyframes misty1 {
  0%   { background-position: 100% 0;}
  50%  { background-position: 50% 0;}
  100% { background-position: 0 0;}
}
@keyframes misty2 {
  0%   { background-position: 0 0;}
  50%  { background-position: 50% 0;}
  100% { background-position: 100% 0;}
}

透過率やサイズが異る::before, ::after擬似要素を用意し、それぞれのbackground-positionの値をanimationで変化させることで、まるで霧がかかっているように見せます。

実際の表示は以下で確認でき、それぞれの擬似要素の動きがわかりにくい場合はrgbaの値をそれぞれ違うカラーに変更することでわかりやすくなると思います。

こちらの実装方法に関しては以下を参考にさせてもらいました。

半分透過されたグラデーションを重ねる

半分透過されたグラデーションを重ねる見栄えの実装イメージ

説明下手なのでこの言い方が正しいのか自信がないのですが、イメージ下に配置するコンテンツの背景色と同じカラーを指定したグラデーションを半分透過させた状態で重ねることで、イメージが徐々に消えていくような見栄えにしたものです。
HTMLは同じく.heroを指定したdiv要素を使用し、CSSは下記のように記述します。

.hero {
  height: 100vh;
  background: linear-gradient(rgba(255,255,255,0) 50%, rgba(255,255,255,1)), url(background.jpg) center center / cover no-repeat;
}

今回のサンプルではコンテンツ(div class="contents")の背景色を白(background-color: #fff)にしているので、イメージ部分に同じく白を指定した半分透過のグラデーションを重ねることで、画像のような見栄えにすることができます。

実際の表示は以下で確認できます。

 

半分透過されたグラデーションを重ねる見栄えの実装イメージ #2

ちなみに、先ほどのものをカラー変更して、更にイメージ部分だけでなくコンテンツ部分にもグラデーションを実装してみるとこのような見栄えにすることもできます。