GrafanaUI: Remove blurred background from overlay backdrops to improve performance (#103563)

* default noBackdropBlur to enabled

* move blur from hacks to theme.components, tweak backdrop colour

* remove toggle completely

* fix unused import

packages/grafana-data/src/themes/createComponents.ts

@@ -31,6 +31,9 @@ export interface ThemeComponents {
   };
   overlay: {
     background: string;
+
+    /* pixel strength for backdrop blurs */
+    blur?: number;
   };
   dashboard: {
     background: string;
@@ -88,7 +91,7 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
       padding: 1,
     },
     overlay: {
-      background: colors.mode === 'dark' ? 'rgba(63, 62, 62, 0.45)' : 'rgba(208, 209, 211, 0.24)',
+      background: colors.mode === 'dark' ? 'rgba(63, 62, 62, 0.5)' : 'rgba(208, 209, 211, 0.5)',
     },
     sidemenu: {
       width: 57,

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -1001,10 +1001,6 @@ export interface FeatureToggles {
   */
   inviteUserExperimental?: boolean;
   /**
-  * Disables backdrop blur
-  */
-  noBackdropBlur?: boolean;
-  /**
   * Enables the alerting migration UI, to migrate datasource-managed rules to Grafana-managed rules
   */
   alertingMigrationUI?: boolean;

packages/grafana-ui/src/components/Carousel/Carousel.tsx

@@ -178,7 +178,6 @@ const getStyles = () => (theme: GrafanaTheme2) => ({
     bottom: 0,
     left: 0,
     backgroundColor: theme.components.overlay.background,
-    backdropFilter: 'blur(1px)',
     alignItems: 'center',
     justifyContent: 'center',
     display: 'flex',

packages/grafana-ui/src/components/Drawer/Drawer.tsx

@@ -292,7 +292,6 @@ const getStyles = (theme: GrafanaTheme2) => {
 
       '&:before': {
         backgroundColor: `${theme.components.overlay.background} !important`,
-        backdropFilter: 'blur(1px)',
         bottom: 0,
         content: '""',
         left: 0,

packages/grafana-ui/src/components/Modal/getModalStyles.ts

@@ -34,7 +34,6 @@ export const getModalStyles = (theme: GrafanaTheme2) => {
       bottom: 0,
       left: 0,
       backgroundColor: theme.components.overlay.background,
-      backdropFilter: 'blur(1px)',
     }),
     modalHeader: css({
       label: 'modalHeader',

packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx

@@ -25,14 +25,13 @@ import { getUplotStyles } from './uPlot';
 import { getUtilityClassStyles } from './utilityClasses';
 
 interface GlobalStylesProps {
-  hackNoBackdropBlur?: boolean;
   isExtensionSidebarOpen?: boolean;
 }
 
 /** @internal */
 export function GlobalStyles(props: GlobalStylesProps) {
   const theme = useTheme2();
-  const { hackNoBackdropBlur, isExtensionSidebarOpen } = props;
+  const { isExtensionSidebarOpen } = props;
 
   return (
     <Global
@@ -57,7 +56,7 @@ export function GlobalStyles(props: GlobalStylesProps) {
         getUplotStyles(theme),
         getUtilityClassStyles(theme),
         getLegacySelectStyles(theme),
-        getHacksStyles({ hackNoBackdropBlur }),
+        getHacksStyles({}),
       ]}
     />
   );

packages/grafana-ui/src/themes/GlobalStyles/hacks.ts

@@ -1,21 +1,8 @@
 import { css } from '@emotion/react';
 
-export interface Hacks {
-  hackNoBackdropBlur?: boolean;
-}
+export interface Hacks {}
 
 export function getHacksStyles(hacks: Hacks) {
-  return css([
-    /**
-     * Disables all backdrop blur effects to improve performance on extremely
-     * resource constrained devices.
-     *
-     * Controlled via the `noBackdropBlur` feature toggle in Grafana
-     */
-    hacks.hackNoBackdropBlur && {
-      '*, *:before, *:after': {
-        backdropFilter: 'none !important',
-      },
-    },
-  ]);
+  // No hacks for now! Look how good we are!
+  return css([]);
 }

pkg/services/featuremgmt/registry.go

@@ -1712,15 +1712,6 @@ var (
 			HideFromDocs:      true,
 			FrontendOnly:      true,
 		},
-		{
-			Name:              "noBackdropBlur",
-			Description:       "Disables backdrop blur",
-			Stage:             FeatureStageExperimental,
-			Owner:             grafanaFrontendPlatformSquad,
-			HideFromAdminPage: true,
-			HideFromDocs:      true,
-			FrontendOnly:      true,
-		},
 		{
 			Name:              "alertingMigrationUI",
 			Description:       "Enables the alerting migration UI, to migrate datasource-managed rules to Grafana-managed rules",

pkg/services/featuremgmt/toggles_gen.csv

@@ -225,7 +225,6 @@ alertRuleRestore,preview,@grafana/alerting-squad,false,false,false
 grafanaManagedRecordingRulesDatasources,experimental,@grafana/alerting-squad,false,false,false
 infinityRunQueriesInParallel,privatePreview,@grafana/oss-big-tent,false,false,false
 inviteUserExperimental,experimental,@grafana/sharing-squad,false,false,true
-noBackdropBlur,experimental,@grafana/grafana-frontend-platform,false,false,true
 alertingMigrationUI,experimental,@grafana/alerting-squad,false,false,true
 unifiedStorageHistoryPruner,experimental,@grafana/search-and-storage,false,false,false
 azureMonitorLogsBuilderEditor,preview,@grafana/partner-datasources,false,false,false

pkg/services/featuremgmt/toggles_gen.go

@@ -911,10 +911,6 @@ const (
 	// Renders invite user button along the app
 	FlagInviteUserExperimental = "inviteUserExperimental"
 
-	// FlagNoBackdropBlur
-	// Disables backdrop blur
-	FlagNoBackdropBlur = "noBackdropBlur"
-
 	// FlagAlertingMigrationUI
 	// Enables the alerting migration UI, to migrate datasource-managed rules to Grafana-managed rules
 	FlagAlertingMigrationUI = "alertingMigrationUI"

pkg/services/featuremgmt/toggles_gen.json

@@ -2177,16 +2177,19 @@
     {
       "metadata": {
         "name": "noBackdropBlur",
-        "resourceVersion": "1743693517832",
-        "creationTimestamp": "2025-04-03T15:18:37Z"
+        "resourceVersion": "1744057771109",
+        "creationTimestamp": "2025-04-03T15:18:37Z",
+        "deletionTimestamp": "2025-04-08T09:27:30Z",
+        "annotations": {
+          "grafana.app/updatedTimestamp": "2025-04-07 20:29:31.109804663 +0000 UTC"
+        }
       },
       "spec": {
-        "description": "Disables backdrop blur",
-        "stage": "experimental",
+        "description": "Disables backdrop blur behind modals and drawers",
+        "stage": "GA",
         "codeowner": "@grafana/grafana-frontend-platform",
         "frontend": true,
-        "hideFromAdminPage": true,
-        "hideFromDocs": true
+        "expression": "true"
       }
     },
     {

public/app/core/components/AppChrome/AppChromeMenu.tsx

@@ -81,7 +81,6 @@ export function AppChromeMenu({}: Props) {
 const getStyles = (theme: GrafanaTheme2) => {
   return {
     backdrop: css({
-      backdropFilter: 'blur(1px)',
       backgroundColor: theme.components.overlay.background,
       bottom: 0,
       left: 0,

public/app/core/components/AppChrome/ExtensionSidebar/GlobalStylesWrapper.tsx

@@ -1,4 +1,3 @@
-import { config } from '@grafana/runtime';
 import { GlobalStyles } from '@grafana/ui';
 
 import { useExtensionSidebarContext } from './ExtensionSidebarProvider';
@@ -10,5 +9,5 @@ import { useExtensionSidebarContext } from './ExtensionSidebarProvider';
 export const GlobalStylesWrapper = () => {
   const { isOpen } = useExtensionSidebarContext();
 
-  return <GlobalStyles hackNoBackdropBlur={config.featureToggles.noBackdropBlur} isExtensionSidebarOpen={isOpen} />;
+  return <GlobalStyles isExtensionSidebarOpen={isOpen} />;
 };

public/app/features/commandPalette/CommandPalette.tsx

@@ -174,7 +174,6 @@ const getSearchStyles = (theme: GrafanaTheme2, lateralSpace: number) => {
         bottom: 0,
         left: 0,
         background: theme.components.overlay.background,
-        backdropFilter: 'blur(1px)',
       },
     }),
     animator: css({

public/app/routes/RoutesWrapper.tsx

@@ -6,7 +6,6 @@ import { CompatRouter } from 'react-router-dom-v5-compat';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import {
-  config,
   locationService,
   LocationServiceProvider,
   useChromeHeaderHeight,
@@ -113,7 +112,7 @@ export function ExperimentalSplitPaneRouterWrapper(props: RouterWrapperProps) {
             <Router history={locationService.getHistory()}>
               <LocationServiceProvider service={locationService}>
                 <CompatRouter>
-                  <GlobalStyles hackNoBackdropBlur={config.featureToggles.noBackdropBlur} />
+                  <GlobalStyles />
                   <div className={styles.secondAppChrome}>
                     <div className={styles.secondAppToolbar}>
                       <IconButton