How do I blur an electron BrowserWindow with transparency

Question

Question

Is it possible to make a BrowserWindow, in electron, transparent with blur? In that it blurs all background content, including apps and the wallpaper.

And if possible, how would I accomplish this?

Examples

Here are some code I've tried.
index.js:

let win = new BrowserWindow({
    fullscreen: true,
    fullscreenable: false,
    frame: false,
    skipTaskbar: true,
    resizable: false,
    movable: false,
    show: false,
    alwaysOnTop: true,
    transparent: true
})

style.css:

html, body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: rgb(255, 255, 255);
    backdrop-filter: blur(4px);
}

The html is just a body with a h1 tag with text in it.
Although this only creates a black background in the window.

I read something about this:

webPreferences: {
    experimentalFeatures: true
}

But can't get it to work.

Environment

• Ubuntu: 18.04.2
• Node: v10.15.3
• npm: 6.4.1
• i3wm. 4.14.1

I have compton running. Maybey it has to do with that. Or the compositing engine in general?

Thanks in advance!

Bearish

Answer 1

electron-acrylic-window

Actually, it is possible, with a little bit of magic. I have no idea why nobody pointed that out, but there exists a small utility called electron-acrylic-window, which allows you to do exactly that. You can choose between the acrylic ("frosted") and blur effects, as well as change the color of the window and the opacity.

Under the hood, it uses node-gyp and low-level C++ code to render the page however you like. It's pretty easy to implement in JavaScript.

Drawbacks

• Anything that is remotely transparent (and not above anything with a solid color) will be rendered as totally transparent
• The severe performance impact should be noted as well. You should enable this in your app only after prompting the user or verifying the computing power of the machine on which all this will run
• It might also not be compatible with programs that change the behavior of the desktop (ie Wallpaper Engine, Transparent/RoundedTB, ...)
• Compatibility with other EcmaScript/TypeScript runners (like Bun) might be difficult
• As the lib is not used a lot, it has a higher chance to be abandoned or deprecated in the future

Sample usage

index.js

import { BrowserWindow } from 'electron-acrylic-window'; // ESM
// const { BrowserWindow } = require('electron-acrylic-window'); // CommonJS

const win = new BrowserWindow({
    ...,
    frame: false,
    vibrancy: {
        theme: 'light', // (default) or 'dark' or '#rrggbbaa'
        effect: 'acrylic', // (default) or 'blur'
        disableOnBlur: true, // (default)
    }
});

// alternatively use these to
// dynamically change vibrancy
win.setVibrancy([options])
// or
setVibrancy(win, [options])

style.css

body {
    background-color: transparent;
}

.foo {
    background-color: black;
}

Pennebaker

Answer 2

This question had gotten somewhat old and the other answers are quite outdated as well, so here's an update:

Since a few past major versions Electron allows you to customise native translucent/backdrop settings on MacOS and Windows 11. These are vibrancy and backgroundMaterial respectively.

It seems to be working fine with transparent and frameless windows, although there were some known issues regarding it in the past.

It's better described in the Electron docs.

const window = new BrowserWindow({
    vibrancy: 'fullscreen-ui',    // on MacOS
    backgroundMaterial: 'acrylic' // on Windows 11
})

On MacOS:

Cabbagehead

Answer 3

It's not possible to blur other apps in the background. https://www.electronjs.org/docs/api/frameless-window#limitations

The blur filter only applies to the web page, so there is no way to apply blur effect to the content below the window (i.e. other applications open on the user's system).

Aufmann

Answer 4

Electron does not allow you to blur on anything running behind it. It only allows you to blur the content on your webpage/app. Anything in your css styling will only be applied to the foreground contents. I know because I too have tried and failed.

Giverin