--- a/devtools/server/actors/highlighters.css
+++ b/devtools/server/actors/highlighters.css
@@ -227,17 +227,17 @@
 }
 
 :-moz-native-anonymous .css-grid-regions {
   opacity: 0.6;
 }
 
 :-moz-native-anonymous .css-grid-areas,
 :-moz-native-anonymous .css-grid-cells {
-  fill: #CEC0ED;
+  opacity: 0.5;
   stroke: none;
 }
 
 :-moz-native-anonymous .css-grid-area-infobar-name,
 :-moz-native-anonymous .css-grid-cell-infobar-position,
 :-moz-native-anonymous .css-grid-line-infobar-number {
   color: hsl(285, 100%, 75%);
 }

--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -737,21 +737,28 @@ CssGridHighlighter.prototype = extend(Au
    * Update the highlighter on the current highlighted node (the one that was
    * passed as an argument to show(node)).
    * Should be called whenever node's geometry or grid changes.
    */
   _update() {
     setIgnoreLayoutChanges(true);
 
     let root = this.getElement("root");
+    let cells = this.getElement("cells");
+    let areas = this.getElement("areas");
+
     // Hide the root element and force the reflow in order to get the proper window's
     // dimensions without increasing them.
     root.setAttribute("style", "display: none");
     this.win.document.documentElement.offsetWidth;
 
+    // Set the grid cells and areas fill to the current grid colour.
+    cells.setAttribute("style", `fill: ${this.color}`);
+    areas.setAttribute("style", `fill: ${this.color}`);
+
     let { width, height } = this._winDimensions;
 
     // Updates the <canvas> element's position and size.
     // It also clear the <canvas>'s drawing context.
     this.updateCanvasElement();
 
     // Clear the grid area highlights.
     this.clearGridAreas();