diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js
index 5edfd5a8c9b0..372953a2e205 100644
--- a/lighthouse-treemap/app/src/main.js
+++ b/lighthouse-treemap/app/src/main.js
@@ -9,8 +9,6 @@
 
 /* globals I18n webtreemap strings TreemapUtil Tabulator Cell Row */
 
-const UNUSED_BYTES_IGNORE_THRESHOLD = 20 * 1024;
-const UNUSED_BYTES_IGNORE_BUNDLE_SOURCE_RATIO = 0.5;
 const DUPLICATED_MODULES_IGNORE_THRESHOLD = 1024;
 const DUPLICATED_MODULES_IGNORE_ROOT_RATIO = 0.01;
 
@@ -224,29 +222,10 @@ class TreemapViewer {
     function createUnusedBytesViewMode(root) {
       if (root.unusedBytes === undefined) return;
 
-      /** @type {LH.Treemap.Highlight[]} */
-      const highlights = [];
-      for (const d1Node of root.children || []) {
-        // Only highlight leaf nodes if entire node (ie a JS bundle) has greater than a certain
-        // number of unused bytes.
-        if (!d1Node.unusedBytes || d1Node.unusedBytes < UNUSED_BYTES_IGNORE_THRESHOLD) continue;
-
-        TreemapUtil.walk(d1Node, (node, path) => {
-          // Only highlight leaf nodes of a certain ratio of unused bytes.
-          if (node.children) return;
-          if (!node.unusedBytes || !node.resourceBytes) return;
-          if (node.unusedBytes / node.resourceBytes < UNUSED_BYTES_IGNORE_BUNDLE_SOURCE_RATIO) {
-            return;
-          }
-
-          highlights.push({path: [root.name, ...path]});
-        });
-      }
       return {
         id: 'unused-bytes',
         label: TreemapUtil.i18n.strings.unusedBytesLabel,
         subLabel: TreemapUtil.i18n.formatBytesWithBestUnit(root.unusedBytes),
-        highlights,
         enabled: true,
       };
     }
@@ -412,7 +391,7 @@ class TreemapViewer {
 
     if (rootChanged || viewChanged) {
       this.updateColors();
-      applyActiveClass(this.currentViewMode.id);
+      applyActiveClass(this.currentViewMode.id, this.el);
     }
 
     this.previousRenderState = {
@@ -612,6 +591,8 @@ class TreemapViewer {
         this.getHueForD1NodeName(depthOneNode ? depthOneNode.name : node.name);
       const depthOneNodeColor = hue !== undefined ? this.getColorFromHue(hue) : 'white';
 
+      if (!node.dom) return;
+
       let backgroundColor;
       if (this.currentViewMode.highlights) {
         // A view can set nodes to highlight. If so, don't color anything else.
@@ -623,12 +604,16 @@ class TreemapViewer {
         } else {
           backgroundColor = 'white';
         }
-      } else {
-        backgroundColor = depthOneNodeColor;
+        node.dom.style.backgroundColor = backgroundColor;
+        return;
       }
 
-      if (node.dom) {
-        node.dom.style.backgroundColor = backgroundColor;
+      node.dom.style.backgroundColor = depthOneNodeColor;
+
+      // Shade the element to communicate coverage.
+      if (this.currentViewMode.id === 'unused-bytes') {
+        const pctUsed = (1 - (node.unusedBytes || 0) / node.resourceBytes) * 100;
+        node.dom.style.setProperty('--pctUsed', `${pctUsed}%`);
       }
     });
   }
@@ -673,14 +658,16 @@ function renderViewModeButtons(viewModes) {
 
 /**
  * @param {string} currentViewModeId
+ * @param {HTMLElement} el
  */
-function applyActiveClass(currentViewModeId) {
+function applyActiveClass(currentViewModeId, el) {
   const viewModesEl = TreemapUtil.find('.lh-modes');
   for (const viewModeEl of viewModesEl.querySelectorAll('.view-mode')) {
     if (!(viewModeEl instanceof HTMLElement)) continue;
 
-    viewModeEl.classList
-      .toggle('view-mode--active', viewModeEl.id === `view-mode--${currentViewModeId}`);
+    const isMatch = viewModeEl.id === `view-mode--${currentViewModeId}`;
+    viewModeEl.classList.toggle('view-mode--active', isMatch);
+    el.classList.toggle(`lh-treemap--${viewModeEl.id}`, isMatch);
   }
 }
 
diff --git a/lighthouse-treemap/app/styles/treemap.css b/lighthouse-treemap/app/styles/treemap.css
index e756e247f85d..4c1922e5224b 100644
--- a/lighthouse-treemap/app/styles/treemap.css
+++ b/lighthouse-treemap/app/styles/treemap.css
@@ -132,6 +132,13 @@ body {
   width: calc(100% * var(--unused) / var(--max));
   height: 7px;
   margin-left: 2px;
+  background: repeating-linear-gradient(
+          -45deg,
+          hsl(7, 85%, 58%),
+          hsl(7, 85%, 58%) 2px,
+          hsla(7, 80%, 45%, 1) 2px,
+          hsla(7, 80%, 45%, 1) 4px
+  );
 }
 
 .view-mode {
@@ -201,6 +208,23 @@ header {
   outline: 2px solid black;
 }
 
+.lh-treemap--view-mode--unused-bytes .webtreemap-node::before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  content: '';
+  display: block;
+  width: var(--pctUsed);
+  background: repeating-linear-gradient(
+          -45deg,
+          hsla(0, 0%, 0%, 0),
+          hsla(0, 0%, 0%, 0) 2px,
+          hsla(7, 85%, 56%, 0.3) 2px,
+          hsla(7, 85%, 56%, 0.3) 4px
+  );
+}
+
 .webtreemap-caption {
   font-size: 12px;
   text-align: center;