MVH

Appearance

GNOME Panel Blur Theme ​

A minimal GNOME Shell theme that adds macOS Sequoia-style frosted glass blur effects to panel dropdowns (calendar, notifications, quick settings) without requiring extensions to be modified.

Overview ​

While using GNOME, I wanted the beautiful frosted glass aesthetic that macOS Sequoia provides for its panel dropdowns. The blur-my-shell extension came close but didn't support blurring panel dropdowns (calendar, notifications, quick settings) due to limitations in how extensions interact with GNOME Shell's panel components.

This theme provides a CSS-only solution that adds blur effects directly to panel dropdowns, giving GNOME Shell a modern, polished appearance.

The Problem ​

GNOME Shell's default panel dropdowns have solid backgrounds that can feel heavy and dated. While the blur-my-shell extension adds blur effects to various UI elements, it doesn't cover panel dropdowns because:

  • Panel dropdowns require direct theme modifications
  • Extensions can't easily override panel component styling
  • Modifying extensions directly breaks with updates

I wanted a way to get the macOS Sequoia-style frosted glass look for calendar, notifications, and quick settings without maintaining custom extension forks.

The Solution ​

This theme uses a minimal CSS-only approach that modifies GNOME Shell's panel dropdown styling directly. By installing it as a user theme (using the User Themes extension), it adds backdrop-filter blur effects to panel dropdowns without requiring any extension modifications.

The theme is lightweight, performant, and works alongside other GNOME Shell themes. It only modifies panel dropdown styling, leaving the rest of your theme untouched.

Key Features ​

  • Frosted Glass Aesthetic: macOS Sequoia-style blur effects on panel dropdowns
  • Minimal & Lightweight: CSS-only solution with no JavaScript overhead
  • Non-Intrusive: Only modifies panel dropdowns, works with any GTK theme
  • Performance-Optimized: Uses GPU-accelerated backdrop-filter for smooth rendering
  • Customizable: Easy to adjust blur amount and opacity in the CSS file
  • Compatible: Works with GNOME 46+ on Wayland and X11

Getting Started ​

Prerequisites ​

You need the User Themes extension enabled:

bash
# Check if User Themes extension is enabled
gnome-extensions list --enabled | grep user-theme

# If not listed, enable it:
gnome-extensions enable [email protected]

Installation ​

  1. Clone the repository:
bash
git clone https://github.com/michielvha/gnome-panel-blur-theme.git
  1. Copy the theme to your themes directory:
bash
mkdir -p ~/.themes
cp -r gnome-panel-blur-theme ~/.themes/BlurredPanels
  1. Apply the theme:
bash
gsettings set org.gnome.shell.extensions.user-theme name 'BlurredPanels'
  1. Reload GNOME Shell:
    • Wayland: Changes apply immediately or after a few seconds
    • X11: Press Alt+F2, type r, and press Enter

Customization ​

Adjust Blur Amount ​

Edit ~/.themes/BlurredPanels/gnome-shell/gnome-shell.css:

css
/* Increase blur (default is 40px) */
backdrop-filter: saturate(180%) blur(60px) !important;

/* Decrease blur */
backdrop-filter: saturate(180%) blur(20px) !important;

Adjust Opacity ​

css
/* More opaque (less transparent) - better for readability */
background-color: rgba(28, 28, 30, 0.95) !important;

/* More transparent - more see-through effect */
background-color: rgba(28, 28, 30, 0.70) !important;

After making changes, reload the theme using the same command as installation.

Compatibility ​

OSGNOME VersionStatus
Ubuntu 24.04 LTS46✅ Fully Tested
Ubuntu 24.1047⚠️ Should work
Fedora 4046⚠️ Should work
Other distros46+⚠️ May need adjustments

Background ​

This theme was created as a solution for blur-my-shell issue #576 - adding blur to panel dropdowns that the extension doesn't currently support. The goal was to create a minimal, performant CSS-only solution that provides the macOS Sequoia frosted glass aesthetic without modifying any extensions or core GNOME Shell code.

Resources ​