ぼかしから濃くなるグラデーションの作り方【CSS】

この記事の前提条件

対象: CSS(全モダンブラウザ対応)
難易度: ★☆☆
所要時間: 約5分

記事の途中で「続きは会員登録で」と隠したい時や、長いコードブロックの下端をふわっとぼかして「まだ続きがある」と示したい時に使うのが、下にいくほどぼんやり(または、はっきり)変化するグラデーション表現です。画像を使わずCSSだけで再現できます。

目次非表示

白いグラデーションを重ねて「ぼかし」を表現する
逆に「ぼかしから濃くなる」演出にしたい場合
まとめ

目次へ

白いグラデーションを重ねて「ぼかし」を表現する

実際にぼかしフィルターをかけているわけではなく、背景色と同じ色を透明から不透明へ変化させたグラデーションを、コンテンツの上に重ねることで「だんだん見えなくなる」演出を作ります。

.fade-overlay {
  position: relative;
}

.fade-overlay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  pointer-events: none; /* 下のテキストを選択・クリックできるようにする */
}

rgba(255,255,255,0)(透明な白)からrgba(255,255,255,1)(不透明な白)へ変化させることで、下にいくほど背景色に溶け込んで消えていくように見えます。背景色がグレーや画像の場合は、その色に合わせてrgba()の値を変更してください。

⚠️ pointer-events: none; を忘れると下の要素を操作できなくなる

グラデーション部分は::afterで要素の上に重ねているため、pointer-events: none;を指定し忘れると、グラデーション部分がクリックやテキスト選択を邪魔してしまいます。透明に見えていても要素としては存在している、という点を忘れないようにしてください。

逆に「ぼかしから濃くなる」演出にしたい場合

画像自体をぼかしたい場合は、CSSのfilter: blur();を使い、mask-imageで徐々にぼかしを解除していく、というテクニックもあります。ただしこちらは表現がやや高度になる上、Safariでの対応にベンダープレフィックス(-webkit-mask-image)が必要になるなど、ブラウザ間の差異が出やすい実装です。単純な「コンテンツをふわっと隠す」演出であれば、本記事で紹介したグラデーション重ねの方法で十分なケースがほとんどです。