Transparent windows

Given that we are working on the screenshot snipping tool, it is vital to be able to select an area of the screen to create a screenshot. Traditionally, such tools offer a transparent and resizable window so that users can imagine the result more clearly.

You can enable window transparency by using the transparent property like so:

function createWindow() {
  win = new BrowserWindow({
    transparent: true,
    frame: false
  });

  win.loadURL(`http://localhost:3000`);

  win.on('closed', () => {
    win = null;
  });
}

Please note that transparency mode has its own platform-specific limitations. You can find all the details here: https://electronjs.org/docs/api/frameless-window#limitations.

However, if you try to run your application right now, it won't be transparent. This is because of the default background color that Create React App generates...