diff --git a/gfx/webrender_bindings/RenderCompositor.cpp b/gfx/webrender_bindings/RenderCompositor.cpp
index a8bbc5d2d0a7..f4211328f905 100644
--- a/gfx/webrender_bindings/RenderCompositor.cpp
+++ b/gfx/webrender_bindings/RenderCompositor.cpp
@@ -72,6 +72,13 @@ void wr_compositor_create_external_surface(void* aCompositor,
   compositor->CreateExternalSurface(aId, aIsOpaque);
 }
 
+void wr_compositor_create_backdrop_surface(void* aCompositor,
+                                           wr::NativeSurfaceId aId,
+                                           wr::ColorF aColor) {
+  RenderCompositor* compositor = static_cast<RenderCompositor*>(aCompositor);
+  compositor->CreateBackdropSurface(aId, aColor);
+}
+
 void wr_compositor_create_tile(void* aCompositor, wr::NativeSurfaceId aId,
                                int32_t aX, int32_t aY) {
   RenderCompositor* compositor = static_cast<RenderCompositor*>(aCompositor);
diff --git a/gfx/webrender_bindings/RenderCompositor.h b/gfx/webrender_bindings/RenderCompositor.h
index 965d1cccb730..89b06395c1f5 100644
--- a/gfx/webrender_bindings/RenderCompositor.h
+++ b/gfx/webrender_bindings/RenderCompositor.h
@@ -131,6 +131,8 @@ class RenderCompositor {
                              wr::DeviceIntPoint aVirtualOffset,
                              wr::DeviceIntSize aTileSize, bool aIsOpaque) {}
   virtual void CreateExternalSurface(wr::NativeSurfaceId aId, bool aIsOpaque) {}
+  virtual void CreateBackdropSurface(wr::NativeSurfaceId aId,
+                                     wr::ColorF aColor) {}
   virtual void DestroySurface(NativeSurfaceId aId) {}
   virtual void CreateTile(wr::NativeSurfaceId, int32_t aX, int32_t aY) {}
   virtual void DestroyTile(wr::NativeSurfaceId, int32_t aX, int32_t aY) {}
diff --git a/gfx/webrender_bindings/src/bindings.rs b/gfx/webrender_bindings/src/bindings.rs
index df14a6d934ec..45ae70291f48 100644
--- a/gfx/webrender_bindings/src/bindings.rs
+++ b/gfx/webrender_bindings/src/bindings.rs
@@ -1210,6 +1210,7 @@ extern "C" {
         is_opaque: bool,
     );
     fn wr_compositor_create_external_surface(compositor: *mut c_void, id: NativeSurfaceId, is_opaque: bool);
+    fn wr_compositor_create_backdrop_surface(compositor: *mut c_void, id: NativeSurfaceId, color: ColorF);
     fn wr_compositor_destroy_surface(compositor: *mut c_void, id: NativeSurfaceId);
     fn wr_compositor_create_tile(compositor: *mut c_void, id: NativeSurfaceId, x: i32, y: i32);
     fn wr_compositor_destroy_tile(compositor: *mut c_void, id: NativeSurfaceId, x: i32, y: i32);
@@ -1286,6 +1287,12 @@ impl Compositor for WrCompositor {
         }
     }
 
+    fn create_backdrop_surface(&mut self, id: NativeSurfaceId, color: ColorF) {
+        unsafe {
+            wr_compositor_create_backdrop_surface(self.0, id, color);
+        }
+    }
+
     fn destroy_surface(&mut self, id: NativeSurfaceId) {
         unsafe {
             wr_compositor_destroy_surface(self.0, id);
diff --git a/gfx/wr/webrender/src/composite.rs b/gfx/wr/webrender/src/composite.rs
index 60a4aadadfd3..a4ceb13bd747 100644
--- a/gfx/wr/webrender/src/composite.rs
+++ b/gfx/wr/webrender/src/composite.rs
@@ -37,6 +37,10 @@ pub enum NativeSurfaceOperationDetails {
         id: NativeSurfaceId,
         is_opaque: bool,
     },
+    CreateBackdropSurface {
+        id: NativeSurfaceId,
+        color: ColorF,
+    },
     DestroySurface {
         id: NativeSurfaceId,
     },
@@ -1068,6 +1072,13 @@ pub trait Compositor {
         is_opaque: bool,
     );
 
+    /// Create a new OS backdrop surface that will display a color.
+    fn create_backdrop_surface(
+        &mut self,
+        id: NativeSurfaceId,
+        color: ColorF,
+    );
+
     /// Destroy the surface with the specified id. WR may call this
     /// at any time the surface is no longer required (including during
     /// renderer deinit). It's the responsibility of the embedder
diff --git a/gfx/wr/webrender/src/compositor/sw_compositor.rs b/gfx/wr/webrender/src/compositor/sw_compositor.rs
index 772022e87903..9d136ee1968a 100644
--- a/gfx/wr/webrender/src/compositor/sw_compositor.rs
+++ b/gfx/wr/webrender/src/compositor/sw_compositor.rs
@@ -1166,6 +1166,10 @@ impl Compositor for SwCompositor {
             .insert(id, SwSurface::new(DeviceIntSize::zero(), is_opaque));
     }
 
+    fn create_backdrop_surface(&mut self, _id: NativeSurfaceId, _color: ColorF) {
+        unreachable!("Not implemented.")
+    }
+
     fn destroy_surface(&mut self, id: NativeSurfaceId) {
         if let Some(surface) = self.surfaces.remove(&id) {
             self.deinit_surface(&surface);
diff --git a/gfx/wr/webrender/src/renderer/mod.rs b/gfx/wr/webrender/src/renderer/mod.rs
index 5f11141ba92f..2a265a760b93 100644
--- a/gfx/wr/webrender/src/renderer/mod.rs
+++ b/gfx/wr/webrender/src/renderer/mod.rs
@@ -2187,7 +2187,7 @@ impl Renderer {
             self.unbind_debug_overlay();
         }
 
-        if device_size.is_some() { 
+        if device_size.is_some() {
             // Inform the client that we are finished this composition transaction if native
             // compositing is enabled. This must be called after any debug / profiling compositor
             // surfaces have been drawn and added to the visual tree.
@@ -4679,6 +4679,14 @@ impl Renderer {
                                 is_opaque,
                             );
                         }
+                        NativeSurfaceOperationDetails::CreateBackdropSurface { id, color } => {
+                            let _inserted = self.allocated_native_surfaces.insert(id);
+                            debug_assert!(_inserted, "bug: creating existing surface");
+                            compositor.create_backdrop_surface(
+                                id,
+                                color,
+                            );
+                        }
                         NativeSurfaceOperationDetails::DestroySurface { id } => {
                             let _existed = self.allocated_native_surfaces.remove(&id);
                             debug_assert!(_existed, "bug: removing unknown surface");
diff --git a/gfx/wr/webrender/src/resource_cache.rs b/gfx/wr/webrender/src/resource_cache.rs
index 82eaa6f7cc8e..a88621206543 100644
--- a/gfx/wr/webrender/src/resource_cache.rs
+++ b/gfx/wr/webrender/src/resource_cache.rs
@@ -6,7 +6,7 @@ use api::{BlobImageRequest, RasterizedBlobImage, ImageFormat};
 use api::{DebugFlags, FontInstanceKey, FontKey, FontTemplate, GlyphIndex};
 use api::{ExternalImageData, ExternalImageType, ExternalImageId, BlobImageResult};
 use api::{DirtyRect, GlyphDimensions, IdNamespace, DEFAULT_TILE_SIZE};
-use api::{ImageData, ImageDescriptor, ImageKey, ImageRendering, TileSize};
+use api::{ColorF, ImageData, ImageDescriptor, ImageKey, ImageRendering, TileSize};
 use api::{BlobImageHandler, BlobImageKey, VoidPtrToSizeFn};
 use api::units::*;
 use crate::{render_api::{ClearCache, AddFont, ResourceUpdate, MemoryReport}, util::WeakTable};
@@ -1404,6 +1404,24 @@ impl ResourceCache {
         }
     }
 
+    pub fn create_compositor_backdrop_surface(
+        &mut self,
+        color: ColorF
+    ) -> NativeSurfaceId {
+        let id = NativeSurfaceId(NEXT_NATIVE_SURFACE_ID.fetch_add(1, Ordering::Relaxed) as u64);
+
+        self.pending_native_surface_updates.push(
+            NativeSurfaceOperation {
+                details: NativeSurfaceOperationDetails::CreateBackdropSurface {
+                    id,
+                    color,
+                },
+            }
+        );
+
+        id
+    }
+
     /// Queue up allocation of a new OS native compositor surface with the
     /// specified tile size.
     pub fn create_compositor_surface(