How to make a semi-transparent app background with electron?

Question

I'm quite new to Electron and am wondering how i can create the effect where parts of an application are partially transparent, and show a blurred image of the applications below them.
This screenshot of Canary, an email app is a good example of what I mean.

(I edited out my emails in preview)

How would I go about creating an effect similar to this in Electron? Specifically, how would I make a <div> element show a blurred version of the applications below it? Is this even possible with Electron?

Thank you for your help in advance.

Answer 1

When setting up the browser window in your main.js file, set the vibrancy option to one of electrons options.

A snippet from electrons documents below

"vibrancy String (optional) - Add a type of vibrancy effect to the window, only on macOS. 
Can be appearance-based, light, dark, titlebar, selection, menu, popover, sidebar, medium-light or ultra-dark."

https://github.com/arkenthera/electron-vibrancy/blob/master/README.md

example js code if using the ultra-dark theme

let mainWindow;

const createWindow = () => {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    vibrancy: 'ultra-dark',
  });
};

After setting up the main window's background with the vibrancy set then simply split the window up with a sidebar and the main content. Setting the background color of main to any color you wish leaving the sidebar still with its OSX style transparency

I hope this helps

Answer 2

you can use a function on window setOpacity(number) where number can be as per your preference.