【CSS】backdrop-filterとは

backdrop-filterについての説明です。CSSプロパティ「backdrop-filter」を使用して、要素の背後領域にぼかしや色のシフトなどの視覚効果を適用する方法を紹介しています。2024年に主要なブラウザで標準サポートされ、ウェブデザインにおける背景効果を簡単に実現できます。

ウェブデザインをしていて、背景をもう少し魅力的にしたいと思ったことはありませんか？

そんなときにおすすめなのが「backdrop-filter」です。このCSSプロパティを使用すると、要素の背後領域に対してぼかし等のグラフィカルな効果を適用することができます。

backdrop-filterとは

「backdrop-filter」とは、CSSのフィルター効果を要素の背後領域に適用するためのプロパティです。これにより、背景にぼかしや色のシフト等の視覚効果を追加することができます。

Baseline
backdrop-filterは、2024年にBaselineに追加され、主要なブラウザで標準的にサポートされるようになりました。

使用例

「backdrop-filter」の基本的な使用例を3つ紹介します。

1. ぼかし効果

.filter {
  backdrop-filter: blur(50px);  /* ← backdrop-filterにblurを設定 */

  font-weight: bold;
  flex: 1;
  text-align: center;
  padding: 50px 10px;
  background-color: rgba(255, 255, 255, 0.2);
}

階調反転

.filter {
  backdrop-filter: invert(100%);  /* ← backdrop-filterにinvertを設定 */

  font-weight: bold;
  flex: 1;
  text-align: center;
  padding: 50px 10px;
  background-color: rgba(255, 255, 255, 0.2);
}

3. セピア効果

.filter {
  backdrop-filter: sepia(100%); /* ← backdrop-filterにsepiaを設定 */   

  font-weight: bold;
  flex: 1;
  text-align: center;
  padding: 50px 10px;
  background-color: rgba(255, 255, 255, 0.2);
}

利用可能なフィルター

上記の使用例で紹介した以外にも、様々なフィルター効果を適用することができます。

関数名	効果
blur()	ぼかし
invert()	階調反転
sepia()	セピア
brightness()	明るさ
contrast()	コントラスト
drop-shadow()	影
grayscale()	モノクロ
hue-rotate()	色相回転
opacity()	透過
saturate()	彩度

フィルターの併用

複数のフィルターを組み合わせて使用することも可能です。値の間に半角スペースを入力することで、複数指定することができます。

.filter {
  backdrop-filter: blur(50px) invert(100%); /* ← backdrop-filterにblurとinvertを設定 */

  font-weight: bold;
  flex: 1;
  text-align: center;
  padding: 50px 10px;
  background-color: rgba(255, 255, 255, 0.2);
}

backdrop-filterを使用しない場合、どうなるか？

backdrop-filterを使用しない場合、どのように実装するのか？ぼかし効果を適用するケースで試してみました。

使用しない場合

.container {
  position: relative;
  background-image: url(./img/dummy.png);
  background-size: cover;
  width: 530px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  overflow: hidden; /* 擬似要素がはみ出さないように設定 */
}

.container::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: inherit;
  background-position: center;
  filter: blur(10px); /* ぼかし効果を適用 */
}

.filter {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: 1;
}

使用した場合

.container {
 position: relative;
 background-image: url(./img/dummy.png);
 background-size: cover;
 width: 530px;
 height: 300px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: black;
}

.filter {
 backdrop-filter: blur(50px);  /* ← backdrop-filterにblurを設定 */
 position: absolute;
 inset: 0;
 background-color: rgba(255, 255, 255, 0.2);
 z-index: 1;
}