ヒーローイメージにCSSで実装するグラデーションを組み合わせたサンプル 目次

1. グラデーションを重ねる
2. アニメーションするグラデーションを重ねる
3. ブレンドモードを使う
4. 霧がかかったような見栄え
5. 半分透過されたグラデーションを重ねる

1. グラデーションを重ねる

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

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

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

目次へ

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

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

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;
	-webkit-animation: gradientAnimation 40s ease infinite;
	animation: gradientAnimation 40s ease infinite;
}
@-webkit-keyframes gradientAnimation {
	0%   { background-position: 0% 30%, 0 0;}
	50%  { background-position: 100% 70%, 0 0;}
	100% { background-position: 0% 30%, 0 0;}
}
@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と指定している部分）などを調整することでいろいろな見せ方もできます。

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

簡単にアニメーション付きグラデーションを作成できる「CSS Gradient Animator」

「CSS Gradient Animator」はその名の通りアニメーションするグラデーションを作成することができるジェネレーターです。
Add colour +でカラー追加、Gradient Angle・Scroll Angle・Speedで角度やスピードなどを調整することができ、出力されたソースをコピペするだけで簡単にアニメーション付きのグラデーションを実装することができます。

先ほどのサンプルのように背景画像と併せて使用する場合は、それぞれのカラー指定の部分をRGBAに置き換えて透明度を指定すれば簡単に実装できます。

CSS Gradient Animator

目次へ

3. ブレンドモードを使う

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

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種類あるので、いろいろ組み合わせてみると面白い見た目を発見できるかもしれませんね。

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

目次へ

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

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

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;
	-webkit-animation: misty1 30s ease infinite alternate;
	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;
	-webkit-animation: misty2 15s ease infinite alternate;
	animation: misty2 15s ease infinite alternate;
}
@-webkit-keyframes misty1 {
	0%   { background-position: 100% 0;}
	50%  { background-position: 50% 0;}
	100% { background-position: 0 0;}
}
@-webkit-keyframes misty2 {
	0%   { background-position: 0 0;}
	50%  { background-position: 50% 0;}
	100% { background-position: 100% 0;}
}
@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の値をそれぞれ違うカラーに変更することでわかりやすくなると思います。）

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

目次へ

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

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

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）にしているので、イメージ部分に同じく白を指定した半分透過のグラデーションを重ねることで、画像のような見栄えにすることができます。

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

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

目次へ