Transparent window

To create transparent window in Electron, two steps are required:

  • When creating BrowserWindow, set transparent property, i.e.:
const BrowserWindow = require('electron').BrowserWindow;
myWindow = new BrowserWindow({
    name: "My app window",
    width: 500,
    height: 250,
    transparent: true,
    frame: false,
    toolbar: false
  • For your main window HTML file, define CSS to make background transparent:
html, body {
    background: rgba(0, 0, 0, 0);

That's it!

About Vjekoslav Ratkajec

Software developer from Zagreb, Croatia. Love programming, running, hiking and biking. Adore nature and animals. Also author of this blog.