diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder.jsx b/superset-frontend/src/dashboard/components/DashboardBuilder.jsx
index 0b59c80f57cb..017bdf5b7313 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder.jsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder.jsx
@@ -25,6 +25,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Sticky, StickyContainer } from 'react-sticky';
 import { TabContainer, TabContent, TabPane } from 'react-bootstrap';
+import { styled } from '@superset-ui/core';
 
 import BuilderComponentPane from './BuilderComponentPane';
 import DashboardHeader from '../containers/DashboardHeader';
@@ -70,6 +71,44 @@ const defaultProps = {
   colorScheme: undefined,
 };
 
+const StyledDashboardContent = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  height: auto;
+
+  .grid-container .dashboard-component-tabs {
+    box-shadow: none;
+    padding-left: 0;
+  }
+
+  & > div:first-child {
+    width: 100%;
+    flex-grow: 1;
+    position: relative;
+  }
+
+  .dashboard-component-chart-holder {
+    // transitionable traits to show filter relevance
+    transition: all 0.2s;
+    border: 2px solid transparent;
+    box-shadow: 0px 0px 0px #fff;
+  }
+  &.focused-filter-field {
+    .dashboard-component-chart-holder {
+      background: none;
+      filter: blur(2px);
+      opacity: 0.3;
+      &.scoped-to-focused-filter {
+        border-color: ${({ theme }) => theme.colors.primary.light2};
+        filter: blur(0);
+        opacity: 1;
+        box-shadow: 0px 0px 8px ${({ theme }) => theme.colors.primary.light2};
+      }
+    }
+  }
+`;
+
 class DashboardBuilder extends React.Component {
   static shouldFocusTabs(event, container) {
     // don't focus the tabs when we click on a tab
@@ -224,9 +263,8 @@ class DashboardBuilder extends React.Component {
           )}
         </Sticky>
 
-        <div
+        <StyledDashboardContent
           className={cx(
-            'dashboard-content',
             focusedFilterField && 'focused-filter-field',
           )}
         >
@@ -284,7 +322,7 @@ class DashboardBuilder extends React.Component {
               colorScheme={colorScheme}
             />
           )}
-        </div>
+        </StyledDashboardContent>
         <ToastPresenter />
       </StickyContainer>
     );
diff --git a/superset-frontend/src/dashboard/stylesheets/builder.less b/superset-frontend/src/dashboard/stylesheets/builder.less
index fbf0ab93fc30..82b4c59ef0de 100644
--- a/superset-frontend/src/dashboard/stylesheets/builder.less
+++ b/superset-frontend/src/dashboard/stylesheets/builder.less
@@ -31,13 +31,6 @@
   box-shadow: 0 4px 4px 0 fade(@darkest, @opacity-light); /* @TODO color */
 }
 
-.dashboard-content {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  height: auto;
-}
-
 /* only top-level tabs have popover, give it more padding to match header + tabs */
 .dashboard > .with-popover-menu > .popover-menu {
   left: 24px;
@@ -49,17 +42,6 @@
   padding-left: 8px; /* note this is added to tab-level padding, to match header */
 }
 
-.dashboard-content .grid-container .dashboard-component-tabs {
-  box-shadow: none;
-  padding-left: 0;
-}
-
-.dashboard-content > div:first-child {
-  width: 100%;
-  flex-grow: 1;
-  position: relative;
-}
-
 .dropdown-toggle.btn.btn-primary .caret {
   color: @lightest;
 }
diff --git a/superset-frontend/src/dashboard/stylesheets/components/chart.less b/superset-frontend/src/dashboard/stylesheets/components/chart.less
index dd613de6ef21..25fb2066cd56 100644
--- a/superset-frontend/src/dashboard/stylesheets/components/chart.less
+++ b/superset-frontend/src/dashboard/stylesheets/components/chart.less
@@ -50,14 +50,6 @@
     box-shadow: none;
     transition: box-shadow 1s ease-in-out;
   }
-
-  &.scoped-to-focused-filter {
-    border: 1px solid green;
-  }
-
-  &.unscoped-to-focused-filter {
-    border: 1px solid red;
-  }
 }
 
 .dashboard-chart {