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!

1 Answers

1
Jacob Morris On

There is a library made just for this reason!

I don't know much about it, but maybe you will have a better time understanding and creating to your vision!

https://www.npmjs.com/package/@hxkuc/electron-vibrancy