diff --git a/packages/grafana-data/src/themes/createComponents.ts b/packages/grafana-data/src/themes/createComponents.ts
index 6421229640b..8135940325e 100644
--- a/packages/grafana-data/src/themes/createComponents.ts
+++ b/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,
diff --git a/packages/grafana-data/src/types/featureToggles.gen.ts b/packages/grafana-data/src/types/featureToggles.gen.ts
index 2c806d13802..6d37f696ff4 100644
--- a/packages/grafana-data/src/types/featureToggles.gen.ts
+++ b/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;
diff --git a/packages/grafana-ui/src/components/Carousel/Carousel.tsx b/packages/grafana-ui/src/components/Carousel/Carousel.tsx
index bbf7173d5bd..17cf1efbf09 100644
--- a/packages/grafana-ui/src/components/Carousel/Carousel.tsx
+++ b/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',
diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
index 3e9afa787bf..b68115dd756 100644
--- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx
+++ b/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,
diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
index ede316fbd32..9f0aa34f0ac 100644
--- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts
+++ b/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',
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx
index f0952c4ccaf..ad4be373aca 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx
+++ b/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 (
);
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/hacks.ts b/packages/grafana-ui/src/themes/GlobalStyles/hacks.ts
index 1e4fea76a6f..2576fe84697 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/hacks.ts
+++ b/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([]);
}
diff --git a/pkg/services/featuremgmt/registry.go b/pkg/services/featuremgmt/registry.go
index 140e758fe68..527c8e69ec5 100644
--- a/pkg/services/featuremgmt/registry.go
+++ b/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",
diff --git a/pkg/services/featuremgmt/toggles_gen.csv b/pkg/services/featuremgmt/toggles_gen.csv
index a8f471f7422..da3238069fb 100644
--- a/pkg/services/featuremgmt/toggles_gen.csv
+++ b/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
diff --git a/pkg/services/featuremgmt/toggles_gen.go b/pkg/services/featuremgmt/toggles_gen.go
index 97cd485c30f..9a1a7fc945e 100644
--- a/pkg/services/featuremgmt/toggles_gen.go
+++ b/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"
diff --git a/pkg/services/featuremgmt/toggles_gen.json b/pkg/services/featuremgmt/toggles_gen.json
index a135cd05cfa..76c1e9604ab 100644
--- a/pkg/services/featuremgmt/toggles_gen.json
+++ b/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"
}
},
{
diff --git a/public/app/core/components/AppChrome/AppChromeMenu.tsx b/public/app/core/components/AppChrome/AppChromeMenu.tsx
index 560370f4c25..e22f53e851c 100644
--- a/public/app/core/components/AppChrome/AppChromeMenu.tsx
+++ b/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,
diff --git a/public/app/core/components/AppChrome/ExtensionSidebar/GlobalStylesWrapper.tsx b/public/app/core/components/AppChrome/ExtensionSidebar/GlobalStylesWrapper.tsx
index dfc71acc4f3..ae2d8a24266 100644
--- a/public/app/core/components/AppChrome/ExtensionSidebar/GlobalStylesWrapper.tsx
+++ b/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 ;
+ return ;
};
diff --git a/public/app/features/commandPalette/CommandPalette.tsx b/public/app/features/commandPalette/CommandPalette.tsx
index 066694fa1ea..28419162be3 100644
--- a/public/app/features/commandPalette/CommandPalette.tsx
+++ b/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({
diff --git a/public/app/routes/RoutesWrapper.tsx b/public/app/routes/RoutesWrapper.tsx
index 118340b4b27..44844ceb354 100644
--- a/public/app/routes/RoutesWrapper.tsx
+++ b/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) {
-
+