メニュー

小金井にあるWEB制作会社の備忘録

MEMORANDUM

CSS「backdrop-filter」を使用して背景にぼかし効果をつける

  • 公開日：2024-12-14
  • 最終更新日：2024-12-02
  • 88

背景画像のぼかし処理や、モーダルウィンドウの背景などを実装する際に、画像処理や、透過画像等で対応していた部分をCSSのみで解決できる方法があったのでメモ。

CSS

.bg__image {
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

ぼかし以外にも色変化のようなグラフィック効果を適用することもできます。
指定した要素の背後にあるすべてに適用されます。

関数名効果値
blurぼかし0px 〜 10px
brightness明るさ0%～
contrastコントラスト0%～
drop-shadow影
grayscaleモノクロ0% ～ 100%
hue-rotate色相回転0deg ～ 360deg
invert階調0% ～ 100%
opacity透過0%～
sepiaセピア0% ～ 100%
saturate彩度0%～
RANKING

人気記事

同一カテゴリーの記事