backdrop-filter:要素の背後領域にぼかしや色変化などのフィルタ効果を与える

初期値 none
適用対象 全ての要素
継承 しない
アニメーション フィルタ関数の値
対応ブラウザ caniuseで確認

backdrop-filterプロパティの説明

backdrop-filterは、要素の背後領域にぼかしや色変化などのフィルタ効果を与えます。これは二つ以上のレイヤー状に重なった要素に対して有効です。例えば、背景画像を持つ親要素の中に、それよりも小さい範囲の子要素を設置して、その子要素が持つサイズに対してだけ、フィルタを掛けることができます。

これにより、以前では画像編集ソフトを使わなければできなかった表現が可能となりました。特に、画像に対して非破壊的にグラフィック効果を追加できる点は、ウェブ制作の柔軟性を強化してくれる強みと言えるでしょう。

backdrop-filterに指定できる値

none
フィルタ効果を与えません。これが初期値です。
<filter-function-list>
CSSで使える<filter-function>またはSVGフィルタの値を空白区切りで指定します。各値を以下に示します。
blur()
ぼかしの度合いを指定します。かっこの中には、ガウス関数の標準偏差を示す単位つきの数値が入ります。ここで指定した値が画面上のピクセルを互いにいくつ混合するかということの半径を表します。
brightness()
明るさの度合いを指定します。かっこの中には、元の画像を基準にした割合や数値が入ります。例えば200%2を入れれば二倍の明るさになり、50%0.5を入れれば半分の明るさになります。
contrast()
コントラストの度合いを指定します。かっこの中には、元の画像を基準にした割合や数値が入ります。例えば200%2を入れれば二倍のコントラストになり、50%0.5を入れれば半分のコントラストになります。
drop-shadow()
要素に含まれる画像に影を与えます。かっこの中には、影のオフセット値やぼかしの半径が入ります。この効果は要素全体の範囲ではなく、画像自体の形に合った影を作成します。
grayscale()
色をグレースケールに変化させます。かっこの中には、彩度をどの程度まで落とすかを示す割合や数値が入ります。例えば、完全なグレースケールは100%1で表されます。
hue-rotate()
色相の変更を指定します。かっこの中には、色相環を回転させる角度が入ります。例えば、180deg.5turnは色相を対極に変更したことを表します。
invert()
色を反転させる度合いを指定します。かっこの中には、反転させる割合や数値が入ります。例えば、色を完全に反転する場合は100%または1を記述します。
opacity()
色の透明度を指定します。かっこの中には、透明度を示す割合や数値が入ります。例えば、50%または.5は半透明となります。
saturate()
彩度を変化させる度合いを指定します。かっこの中には、彩度を示す割合や数値が入ります。例えば、50%または.5を指定すると彩度が下がりくすんだ色になります。
sepia()
色をセピア調に変化させます。かっこの中には、色調をどの程度変化させるかを示す割合や数値が入ります。例えば、100%1を指定すると完全なセピア調になります。

backdrop-filterの使い方とサンプル

backdrop-filterプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
backdrop-filter: none;

/* <filter-function>値 */
backdrop-filter: blur(3px);
backdrop-filter: brightness(50%);
backdrop-filter: contrast(.5);
backdrop-filter: drop-shadow(5px 5px 10px #000);
backdrop-filter: grayscale(0.3);
backdrop-filter: hue-rotate(180deg);
backdrop-filter: invert(60%);
backdrop-filter: opacity(24%);
backdrop-filter: saturate(.3);
backdrop-filter: sepia(86%);

/* 複数の値 */
backdrop-filter: blur(5px) drop-shadow(3px 3px 10px #000);

/* グローバル値 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: unset;

backdrop-filterの実例

それでは実際にbackdrop-filterプロパティの書き方を見ていきましょう。以下の内容で、各フィルタに参考値を入れて出力した時の挙動を確認できます。

表示確認
CSS
.samp_box > div {
	margin-top: 1rem;
	padding: 3rem 1rem;
	background: url(../images/sample_photo_1200x630.jpg) no-repeat;
	background-size: cover;
	text-align: center;
}
div > span {
	display: inline-block;
	width: 200px;
	padding: 2rem 0;
	border-radius: 5px;
}
#bf_blur {
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}
#bf_brightness {
	backdrop-filter: brightness(150%);
	-webkit-backdrop-filter: brightness(150%);
}
#bf_contrast {
	backdrop-filter: contrast(150%);
	-webkit-backdrop-filter: contrast(150%);
}
#bf_drop_shadow {
	backdrop-filter: drop-shadow(5px 5px 3px #000);
	-webkit-backdrop-filter: drop-shadow(5px 5px 3px #000);
}
#bf_grayscale {
	backdrop-filter: grayscale(100%);
	-webkit-backdrop-filter: grayscale(100%);
}
#bf_hue_rotate {
	backdrop-filter: hue-rotate(180deg);
	-webkit-backdrop-filter: hue-rotate(180deg);
}
#bf_invert {
	backdrop-filter: invert(100%);
	-webkit-backdrop-filter: invert(100%);
}
#bf_opacity {
	backdrop-filter: opacity(.5);
	-webkit-backdrop-filter: opacity(.5);
}
#bf_saturate {
	backdrop-filter: saturate(.5);
	-webkit-backdrop-filter: saturate(.5);
}
#bf_sepia {
	backdrop-filter: sepia(1);
	-webkit-backdrop-filter: sepia(1);
}
HTML
<section class="samp_box">
	<div><span id="bf_blur">blur</span></div>
	<div><span id="bf_brightness">brightness</span></div>
	<div><span id="bf_contrast">contrast</span></div>
	<div><span id="bf_drop_shadow">drop-shadow</span></div>
	<div><span id="bf_grayscale">grayscale</span></div>
	<div><span id="bf_hue_rotate">hue-rotate</span></div>
	<div><span id="bf_invert">invert</span></div>
	<div><span id="bf_opacity">opacity</span></div>
	<div><span id="bf_saturate">saturate</span></div>
	<div><span id="bf_sepia">sepia</span></div>
</section>

drop-shadowが効かない時の解決策

backdrop-filterに指定できる値の中で、drop-shadowの挙動には少しクセがあります。この機能を有効にする場合、親要素にopacityを追加し、その値を1未満(0.9999など)にすると表示されるようです。ただし、このやり方は完全ではありません。まず、対応していないブラウザではこのやり方自体が無視されます。また要素の透明度を少なからず変えてしまうため、厳密なデザイン性が失われてしまいます。ドロップシャドウで要素に影を付けたい場合は、filterプロパティでの代替を検討して下さい。

表示確認
CSS
.samp_box {
	position: relative;
	width: 100%;
	min-height: 200px;
	padding: 10px;
	background-color: #ccc;
}
.samp_bg {
	width: 200px;
	height: 100px;
	background-color: #f00;
	opacity: .9999;
}
.samp_ds {
	position: absolute;
	top: 60px;
	left: 110px;
	width: 200px;
	height: 100px;
	border: 1px solid rgba(0, 0, 0, .5);
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.4);
	backdrop-filter: drop-shadow(5px 5px 3px #333);
}
HTML
<div class="samp_box">
	<div class="samp_bg">background
		<span class="samp_ds">drop-shadow</span>
	</div>
</div>

backdrop-filterに関連するCSSプロパティ

背景(バックグラウンド)
background 背景に関する指定をまとめて行う
background-attachment 背景画像の固定・移動を指定する
background-blend-mode 背景色や背景画像の描画モードを指定する
background-clip 背景の描画範囲を指定する
background-color 背景色を指定する
background-image 背景画像やグラデーションを指定する
background-origin 背景画像を配置する基準点を指定する
background-position 背景画像の表示開始位置を指定する
background-repeat 背景画像の繰り返しを指定する
background-size 背景画像を表示するサイズ(大きさ)を指定する
backdrop-filter 要素の背後領域にぼかしや色変化などのフィルタ効果を与える