diff --git a/components/style/gecko/media_features.rs b/components/style/gecko/media_features.rs
index e2ba9f62f0f..ba1f0c8845a 100644
--- a/components/style/gecko/media_features.rs
+++ b/components/style/gecko/media_features.rs
@@ -188,6 +188,13 @@ enum PrefersReducedMotion {
     Reduce,
 }
 
+#[derive(Clone, Copy, Debug, FromPrimitive, Parse, ToCss)]
+#[repr(u8)]
+enum PrefersReducedTransparency {
+    NoPreference,
+    Reduce,
+}
+
 /// Values for the prefers-color-scheme media feature.
 #[derive(Clone, Copy, Debug, FromPrimitive, Parse, PartialEq, ToCss)]
 #[repr(u8)]
@@ -227,6 +234,24 @@ fn eval_prefers_reduced_motion(
     }
 }
 
+/// https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-transparency
+fn eval_prefers_reduced_transparency(
+    context: &Context,
+    query_value: Option<PrefersReducedTransparency>,
+) -> bool {
+    let prefers_reduced =
+        unsafe { bindings::Gecko_MediaFeatures_PrefersReducedTransparency(context.device().document()) };
+    let query_value = match query_value {
+        Some(v) => v,
+        None => return prefers_reduced,
+    };
+
+    match query_value {
+        PrefersReducedTransparency::NoPreference => !prefers_reduced,
+        PrefersReducedTransparency::Reduce => prefers_reduced,
+    }
+}
+
 /// Possible values for prefers-contrast media query.
 /// https://drafts.csswg.org/mediaqueries-5/#prefers-contrast
 #[derive(Clone, Copy, Debug, FromPrimitive, Parse, PartialEq, ToCss)]
@@ -618,7 +643,7 @@ macro_rules! bool_pref_feature {
 /// to support new types in these entries and (2) ensuring that either
 /// nsPresContext::MediaFeatureValuesChanged is called when the value that
 /// would be returned by the evaluator function could change.
-pub static MEDIA_FEATURES: [QueryFeatureDescription; 63] = [
+pub static MEDIA_FEATURES: [QueryFeatureDescription; 64] = [
     feature!(
         atom!("width"),
         AllowsRanges::Yes,
@@ -742,6 +767,12 @@ pub static MEDIA_FEATURES: [QueryFeatureDescription; 63] = [
         keyword_evaluator!(eval_prefers_reduced_motion, PrefersReducedMotion),
         FeatureFlags::empty(),
     ),
+    feature!(
+        atom!("prefers-reduced-transparency"),
+        AllowsRanges::No,
+        keyword_evaluator!(eval_prefers_reduced_transparency, PrefersReducedTransparency),
+        FeatureFlags::empty(),
+    ),
     feature!(
         atom!("prefers-contrast"),
         AllowsRanges::No,
diff --git a/components/style/queries/feature_expression.rs b/components/style/queries/feature_expression.rs
index 24a09e5b54c..0b3ec62218f 100644
--- a/components/style/queries/feature_expression.rs
+++ b/components/style/queries/feature_expression.rs
@@ -322,6 +322,13 @@ fn disabled_by_pref(feature: &Atom, context: &ParserContext) -> bool {
             return !context.in_ua_or_chrome_sheet() &&
                 !static_prefs::pref!("layout.css.prefers-contrast.enabled");
         }
+
+        // prefers-reduced-transparency is always enabled in the ua and chrome. On
+        // the web it is hidden behind a preference (see Bug 1822176).
+        if *feature == atom!("prefers-reduced-transparency") {
+            return !context.in_ua_or_chrome_sheet() &&
+                !static_prefs::pref!("layout.css.prefers-reduced-transparency.enabled");
+        }
     }
     false
 }