backdrop-filterを使ったすりガラス風の背景効果

MARKLEAPS

2021.09.22

backdrop-filterは、要素の背景に様々な効果を付けることができるcssプロパティですが、
その中でも汎用性の高そうな、すりガラス風の効果を付ける方法をご紹介します。

DEMO

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

・html

<div class="bg_wrap01">
    <div class="inner_wrap01 bg_filter01">
        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    </div>
</div>

<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>

</div>

・css

.bg_wrap01 {
	width: 100%;
	height: 400px;
	background: url(images/css_bd-filter02.jpg) no-repeat center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40px;
}
.inner_wrap01 {
	width: 80%;
	padding: 20px;
}
.bg_filter01 {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.bg_wrap01 {

width: 100%;

height: 400px;

background: url(images/css_bd-filter02.jpg) no-repeat center center;

background-size: cover;

display: flex;

align-items: center;

justify-content: center;

margin-bottom: 40px;

}

.inner_wrap01 {

width: 80%;

padding: 20px;

}

.bg_filter01 {

-webkit-backdrop-filter: blur(10px);

backdrop-filter: blur(10px);

}

blurの後の()内にpxでぼかし具合を指定します。

未対応ブラウザへの対応

backdrop-filterはIEやFirefox等の一部ブラウザには対応していません。

Can I use より

backdrop-filter に対応していないIEやFirefox等のブラウザ用に、
backdrop-filter と背景透過を合わせて記述し、未対応のブラウザでは背景透過のみが適用されるように記述します。

DEMO

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

・css

.bg_filter02 {
	background-color: rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.bg_filter02 {

background-color: rgba(255, 255, 255, 0.2);

-webkit-backdrop-filter: blur(10px);

backdrop-filter: blur(10px);

}

CSS

よく読まれている関連記事

CSSアニメーション　2つの機能