diff --git a/gfx/thebes/gfxPlatform.cpp b/gfx/thebes/gfxPlatform.cpp
index 60a49115454a..96b53c105961 100644
--- a/gfx/thebes/gfxPlatform.cpp
+++ b/gfx/thebes/gfxPlatform.cpp
@@ -807,12 +807,6 @@ static void FrameRatePrefChanged(const char* aPref, void*) {
   }
 }
 
-static void RecomputeBackdropFilterEnabledState() {
-  NS_DispatchToMainThread(NS_NewRunnableFunction("RecomputeEnabledState", [] {
-    nsCSSProps::RecomputeEnabledState("layout.css.backdrop-filter.enabled");
-  }));
-}
-
 void gfxPlatform::Init() {
   MOZ_RELEASE_ASSERT(!XRE_IsGPUProcess(), "GFX: Not allowed in GPU process.");
   MOZ_RELEASE_ASSERT(!XRE_IsRDDProcess(), "GFX: Not allowed in RDD process.");
@@ -1084,8 +1078,6 @@ void gfxPlatform::Init() {
   if (obs) {
     obs->NotifyObservers(nullptr, "gfx-features-ready", nullptr);
   }
-
-  RecomputeBackdropFilterEnabledState();
 }
 
 void gfxPlatform::ReportTelemetry() {
@@ -2693,6 +2685,11 @@ void gfxPlatform::InitWebRenderConfig() {
   bool prefEnabled = WebRenderPrefEnabled();
   bool envvarEnabled = WebRenderEnvvarEnabled();
 
+  // This would ideally be in the nsCSSProps code
+  // but nsCSSProps is initialized before gfxPlatform
+  // so it has to be done here.
+  gfxVars::AddReceiver(&nsCSSProps::GfxVarReceiver());
+
   // WR? WR+   => means WR was enabled via gfx.webrender.all.qualified on
   //              qualified hardware
   // WR! WR+   => means WR was enabled via gfx.webrender.{all,enabled} or
@@ -2707,6 +2704,9 @@ void gfxPlatform::InitWebRenderConfig() {
     // later in this function. For other processes we still want to report
     // the state of the feature for crash reports.
     if (gfxVars::UseWebRender()) {
+      // gfxVars doesn't notify receivers when initialized on content processes
+      // we need to explicitly recompute backdrop-filter's enabled state here.
+      nsCSSProps::RecomputeEnabledState("layout.css.backdrop-filter.enabled");
       reporter.SetSuccessful();
     }
     return;
@@ -3288,8 +3288,6 @@ void gfxPlatform::NotifyGPUProcessDisabled() {
             FeatureStatus::Unavailable, "GPU Process is disabled",
             NS_LITERAL_CSTRING("FEATURE_FAILURE_GPU_PROCESS_DISABLED"));
     gfxVars::SetUseWebRender(false);
-
-    RecomputeBackdropFilterEnabledState();
   }
   gfxVars::SetRemoteCanvasEnabled(false);
 }
diff --git a/layout/style/nsCSSProps.cpp b/layout/style/nsCSSProps.cpp
index 10b0df7652f1..72eeb81f4348 100644
--- a/layout/style/nsCSSProps.cpp
+++ b/layout/style/nsCSSProps.cpp
@@ -22,7 +22,8 @@
 #include "mozilla/dom/Animation.h"
 #include "mozilla/dom/AnimationEffectBinding.h"  // for PlaybackDirection
 #include "mozilla/gfx/gfxVars.h"                 // for UseWebRender
-#include "mozilla/LookAndFeel.h"                 // for system colors
+#include "mozilla/gfx/gfxVarReceiver.h"
+#include "mozilla/LookAndFeel.h"  // for system colors
 
 #include "nsString.h"
 #include "nsStaticNameTable.h"
@@ -65,6 +66,7 @@ static nsStaticCaseInsensitiveNameTable* CreateStaticTable(
 }
 
 void nsCSSProps::RecomputeEnabledState(const char* aPref, void*) {
+  MOZ_RELEASE_ASSERT(NS_IsMainThread());
   DebugOnly<bool> foundPref = false;
   for (const PropertyPref* pref = kPropertyPrefTable;
        pref->mPropID != eCSSProperty_UNKNOWN; pref++) {
@@ -73,7 +75,7 @@ void nsCSSProps::RecomputeEnabledState(const char* aPref, void*) {
       gPropertyEnabled[pref->mPropID] = Preferences::GetBool(pref->mPref);
       if (pref->mPropID == eCSSProperty_backdrop_filter) {
         gPropertyEnabled[pref->mPropID] &=
-            gfxPlatform::Initialized() && gfx::gfxVars::UseWebRender();
+            gfx::gfxVars::GetUseWebRenderOrDefault();
       }
     }
   }
@@ -214,4 +216,40 @@ bool nsCSSProps::gPropertyEnabled[eCSSProperty_COUNT_with_aliases] = {
 #undef IS_ENABLED_BY_DEFAULT
 };
 
+/**
+ * A singleton class to register as a receiver for gfxVars.
+ * Updates the state of backdrop-filter's pref if the gfx
+ * WebRender var changes state.
+ */
+class nsCSSPropsGfxVarReceiver final : public gfx::gfxVarReceiver {
+  constexpr nsCSSPropsGfxVarReceiver() = default;
+
+  // WebRender's last known enabled state.
+  static bool sLastKnownUseWebRender;
+  static nsCSSPropsGfxVarReceiver sInstance;
+
+ public:
+  static gfx::gfxVarReceiver& GetInstance() { return sInstance; }
+
+  void OnVarChanged(const gfx::GfxVarUpdate&) override {
+    bool enabled = gfxVars::UseWebRender();
+    if (sLastKnownUseWebRender != enabled) {
+      sLastKnownUseWebRender = enabled;
+      nsCSSProps::RecomputeEnabledState("layout.css.backdrop-filter.enabled");
+    }
+  }
+};
+
+/* static */
+nsCSSPropsGfxVarReceiver nsCSSPropsGfxVarReceiver::sInstance =
+    nsCSSPropsGfxVarReceiver();
+
+/* static */
+bool nsCSSPropsGfxVarReceiver::sLastKnownUseWebRender = false;
+
+/* static */
+gfx::gfxVarReceiver& nsCSSProps::GfxVarReceiver() {
+  return nsCSSPropsGfxVarReceiver::GetInstance();
+}
+
 #include "nsCSSPropsGenerated.inc"
diff --git a/layout/style/nsCSSProps.h b/layout/style/nsCSSProps.h
index c403acb63121..a73fafc0217b 100644
--- a/layout/style/nsCSSProps.h
+++ b/layout/style/nsCSSProps.h
@@ -24,6 +24,7 @@
 #include "mozilla/CSSPropFlags.h"
 #include "mozilla/EnumTypeTraits.h"
 #include "mozilla/Preferences.h"
+#include "mozilla/gfx/gfxVarReceiver.h"
 #include "nsXULAppAPI.h"
 
 // Length of the "--" prefix on custom names (such as custom property names,
@@ -138,6 +139,11 @@ class nsCSSProps {
   static void RecomputeEnabledState(const char* aPrefName,
                                     void* aClosure = nullptr);
 
+  /**
+   * Retrieve a singleton receiver to register with gfxVars
+   */
+  static mozilla::gfx::gfxVarReceiver& GfxVarReceiver();
+
   static const nsCSSPropertyID* SubpropertyEntryFor(nsCSSPropertyID aProperty) {
     MOZ_ASSERT(eCSSProperty_COUNT_no_shorthands <= aProperty &&
                    aProperty < eCSSProperty_COUNT,