【簡単】Firefoxでbackdrop-filterを有効にする方法
はじめに
皆さんはbackdrop-filter
というCSSは使ってますか。
すりガラスのようなエフェクトを与えるプロパティです。

backdrop-filterのサポート状況
当ブログでは、まだ使用してないのですが、下記ブログではbackdrop-filter
を使ってバックグランドをぼかすエフェクトを入れてみました。
EST
背景画像がコロコロ変わるデザインテーマです
backdrop-filter
は「Safari」「Chrome」「Edge」ではフルサポートとなってますが、なぜか「Firefox」はまだサポート対象外のままです。

backdrop-filter - CSS: Cascading Style Sheets | MDN
The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.
Firefoxでこのブログを表示すると、ヘッダーのメイン画像の背景に同じ画像が重なっているので、変な感じのヒーローヘッダーに見えます。
近い将来Firefoxでもサポートされると思いますが、今すぐFirefoxでbackdrop-filter
を使いたい場合は、下記方法で可能なので、お試し下さい。
Firefoxでbackdrop-filterを使う方法
実はFirefoxでbackdrop-filter
は使えるのですが、デフォルトでは無効となっています。
これを設定エディター:about:config
で有効に変更します。
それでは変更の手順を説明します。
変更方法
Firefoxを立ち上げたら、アドレスバーにabout:config
を入力してください。
アラートが表示されますが「危険を承知で使用する」をクリックします。
次にbackdrop-filter
を検索します。
デフォルトではfalse
となっているので右の⇔をクリックします。
true
に変わったら設定変更は終了です。
それではbackdrop-filter
が有効になっているか、確認してみましょう。
一度ブラウザを閉じ、再度Firefoxを立ち上げブログにアクセスします。
今度は背景がぼけて、いい感じに変わりました。
気軽に足跡残してね!
この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。
https://t.co/ulDkY3MYaR
— heavy-peat (@AfterWork_Lab) March 23, 2021
Firefoxでbackdrop-filterを有効にする方法を書いて見ました。
困っている方は、お試し下さい。#CSS #Firefox #backdropfilter
それでは今回の記事はこれでおしまい。