Liquid Glass for GNOME Shell

A GNOME Shell Extension that replicates the "Liquid Glass" UI concept using shaders on your desktop.

I love the look of Apple's Liquid Glass, but since I don't own any Apple products (I use an Android smartphone and a Linux computer), I wanted a way to see it on my desktop every day. So, I decided to build it myself.

Are you a developer? If you'd like to use this glass effect in your own GTK 4 / libadwaita app, take a look at glass-lib.

Dash to Dock:

Notifications:

Panel Menus:

Quick Settings (Background mode):

Quick Settings (Toggle mode, Adwaita theme):

Quick Settings (Toggle mode, MacTahoe theme):

The screenshot above uses the MacTahoe GTK theme by vinceliuice. The theme is not bundled with this extension and has to be installed separately.

Application Windows:

OSD:

Copy and paste this one-liner to clone and install it immediately:

git clone https://github.com/ryohsuke1231/liquid-glass.git && \
mkdir -p ~/.local/share/gnome-shell/extensions/ && \
cp -r liquid-glass/liquid-glass@thinkingcoding1231.gmail.com ~/.local/share/gnome-shell/extensions/

1. Clone this repository: git clone https://github.com/ryohsuke1231/liquid-glass.git
2. Open the liquid-glass folder.
3. Copy the entire liquid-glass@thinkingcoding1231.gmail.com folder to: ~/.local/share/gnome-shell/extensions/
4. Restart GNOME Shell:
   • Wayland: Log out and log back in.
   • X11: Press Alt + F2, type r, and hit Enter.
5. Enable Liquid Glass in the "Extensions" app or Extension Manager.

The effect can be enabled or disabled per UI element on the Effects page. In the Simple view every element shares one look (blur, corners, tint); switch the view to Advanced (Appearance → Settings) to tune each element on its own — tint color and strength, blur radius, corner radius, glass expand, offsets, and brightness / contrast / saturation — plus the element-specific features listed below. Values you tune by eye have a slider next to the number; values whose number is what matters (spring constants, intervals) are typed in.

Where it is supported, the extension samples the brightness of what is behind the UI and adjusts the text color so labels stay readable on both bright and dark wallpapers. A Preferred text colour (Automatic / Light / Dark) decides the cases where the background favours neither. The sample interval is configurable; a shorter interval reacts faster but costs more CPU.

• Whole menu applies the glass as one continuous sheet behind the whole quick settings panel. Corner radius, X/Y offset and the spring animation apply to that sheet.
• Individual buttons gives each toggle button its own glass shape, tracked individually. "Button corners" sets the roundness of each shape, and "Button base colour" controls how much of the toggle's own original color (for example the blue of an active toggle) is kept, independently of the custom tint color.

• Appearance — shared blur, corners and tint; animations, automatic text contrast and matching menu heights.
• Effects — choose where glass appears: dock, menus, popups and application windows.
• Rendering — rendering quality, refraction, edge lighting, shadows and diagnostics.

Opening the window preserves your configuration. Custom means your existing values differ or do not match a preset. Editing a shared control applies its value to every surface; it does not enable disabled effects. Choose Smooth for non-bouncing menu animations. See Preferences for behavior and tests.

The Rendering page controls the shader itself. These settings are global and apply to every element above at once. The Simple view shows the main ones; the Advanced view shows all of them.

• Method - Gaussian (most accurate) or Dual Kawase (cheaper; the radius is not pixel-accurate). The Simple view's Quality preset picks the method and the resolution together.
• Resolution - Half or Quarter. Quarter blurs a quarter of the pixels, at the cost of a visibly coarser blur.

• Thickness - The simulated physical thickness of the glass. Higher values bend the background more strongly near the edges.
• Refraction - The overall strength of the refraction distortion.
• Edge smoothing - Feathering width of the glass silhouette, used as geometry anti-aliasing.
• Surface curvature - The superellipse exponent describing the cross-section of the glass. Low values give a soft, dome-like surface; high values give a flat top with a sharp roll-off at the edge.
• Index of refraction - Optical density of the material. Real glass is roughly 1.5 to 2.4.
• Colour separation - Amount of RGB separation (chromatic aberration) in the refracted image. 0 by default: macOS's glass shows none.

The lens acts over a fixed band (22 px) along the edge, whatever the corner radius or the size of the element, as measured on macOS; the settings above shape the lens inside that band. An element thinner than the band gets the same lens scaled down.

• Highlights / Shininess - Brightness and sharpness of the specular highlights.
• Edge light width / Edge light - Size and brightness of the light band along the edges.
• Edge directionality - How strongly the virtual light direction shapes the edge light (higher values concentrate it on the lit side).
• Edge falloff - Falloff of the Fresnel term for the edge light.
• Edge colour strength - Multiplier for the edge light color.
• Sheen - A broad sheen spread across the surface, sampled from the background. 0 by default.
• Light angle - Direction of the virtual light source, in degrees.

The drop shadow anchors the glass on light backgrounds (a white wallpaper, for example) so it does not visually disappear.

• Shadow radius - How far the shadow extends past the glass edge. 0 disables it.
• Shadow strength - How dark the shadow is.

A separate ambient-occlusion style darkening sits just inside the glass edge, independent of the outer drop shadow.

• Inner shading - How dark the inner band gets. With the edge light on, the darkening falls only where the edge light does not (the edges that run along the light direction), as on macOS.
• Inner shading radius - How far inward the darkening extends before fading out.

• Logging - Print the extension's logs to the journal / terminal. Useful when reporting a bug.
• Render diagnostics - More detailed rendering state in the logs; adds overhead, so leave it off for normal use.
• Dump shortcut - A global shortcut (Ctrl+Alt+L) that records the glass state for a bug report.

Before writing the GNOME implementation in GJS/Clutter, I built a standalone WebGL prototype using Three.js to perfect the math, shaders, and real-time tuning.

You can run the web prototype locally:

cd prototypes/sandbox-threejs
npm install
npm run dev

This project is written in TypeScript and compiled to GJS. To build it:

cd liquid-glass@thinkingcoding1231.gmail.com
npm install
npm run build

The source layout and test instructions describe module ownership and renderer lifecycle constraints.

A significant part of this codebase was written with the help of AI coding assistants, primarily Claude (Anthropic), used for implementation, shader debugging, and refactoring. The design, the shader math, the architecture decisions, and all of the testing on real hardware are mine, and every change is reviewed before it lands.

• Perfect the WebGL/Three.js Prototype
• Port GLSL shaders to GNOME Shell
• Apply Liquid Glass to Top Panel Menus
• Add Dash to Dock support
• Add Notifications support
• Add Settings Feature
• Add Adaptive Text Coloring
• Add Quick Settings support (Background mode)
• Add OSD support
• Add Quick Settings Toggle mode (per-toggle glass)
• Add Application Window support (originally by @hoshizora-chi)
• Improve performance
• Publish to extensions.gnome.org (not approved yet)

MIT. See LICENSE.