Using the transparent argument and setting it to true when creating a new BrowserWindow in Electron usually gives the window a transparent background... But on Linux that isn't the case for my knowledge

Now I heard you can set some Command Line Arguments... But that isn't working... It just displays black or white no matter what...

// Should set the mandLine arguments and work...

const {app} = require('electron')

appmandLine.appendSwitch('enable-transparent-visuals');
appmandLine.appendSwitch('disable-gpu');

Now i have heard this is no problem with electron rather a problem with hardware... But i just needed to make sure therefore creating this question!

Using the transparent argument and setting it to true when creating a new BrowserWindow in Electron usually gives the window a transparent background... But on Linux that isn't the case for my knowledge

Now I heard you can set some Command Line Arguments... But that isn't working... It just displays black or white no matter what...

// Should set the mandLine arguments and work...

const {app} = require('electron')

app.mandLine.appendSwitch('enable-transparent-visuals');
app.mandLine.appendSwitch('disable-gpu');

Now i have heard this is no problem with electron rather a problem with hardware... But i just needed to make sure therefore creating this question!

• javascript
• html
• npm
• electron

• You might want to take a look at this: ourcodeworld./articles/read/315/… – CodeF0x Commented Feb 19, 2019 at 10:13
• I did, and it doesn't work... – undefinedChar Commented Feb 19, 2019 at 10:16
• try to set the rgba attribute of body tag the rgba(255,255,255,0.5). Will it work? – Maged Saeed Commented Feb 20, 2019 at 3:06
• It will help us if can describe your machine and OS. – doom Commented Feb 20, 2019 at 11:51
• Maybe you can also share your source in a repo ? – doom Commented Feb 20, 2019 at 12:13

4 Answers 4

I have encounter the same problem as you and so I have written :

• this StackOverFlow question : Can't succeed in making transparent window in Electron (javascript)
• this Electron issue : https://github./electron/electron/issues/15947
• and finally request this feature : https://github./electron/electron/issues/16809

Till the requested feature is implemented, the solution is simple just add a delay before launching the window.

You can clone this git repo, put the delay to 500, and normally magic will appear.

EDIT 1 : Use this repo : https://gitlab./doom-fr/electron-transparency-demo

git clone https://gitlab./doom-fr/electron-transparency-demo
cd electron-transparency-demo
npm install
npm start
# or npm run startWithTransparentOption
# or npm run startWithAllOptions

For me, it works out of the box with Debian Jessie and electron 4.0.5, for npm start, npm run startWithTransparentOption but not with npm run startWithAllOptions.

NB : be carefull to set at least 500ms to have chance it works. After you can reduce the delay but it is not stable. It is why an event on transparentReady is needed.

Doom

There do seem to be multiple issues with transparency, on different distributions with differing hardware. There are various suggested workarounds. You might not be able to make transparency work acceptably for your scenario on all hardware and distributions.

Examples

• https://github./electron/electron/issues/2170
• https://github./zeit/hyper/pull/842
• https://github./electron/electron/issues/15947
• Can't succeed in making transparent window in Electron (javascript)

From the Electron docs:

On Linux, users have to put --enable-transparent-visuals --disable-gpu in the mand line to disable GPU and allow ARGB to make transparent window, this is caused by an upstream bug that alpha channel doesn't work on some NVidia drivers on Linux.

https://github./electron/electron/blob/master/docs/api/frameless-window.md

This worked to me:

if(process.platform === "linux") {
  app.mandLine.appendSwitch('enable-transparent-visuals');
  app.disableHardwareAcceleration();

  app.on('ready', () => setTimeout(createWindow, 400));
}

This code might work for you. I add explain in ment.

//electron can't be transparent on linux
//see issue on github: https://github./electron/electron/issues/2170

// app.disableHardwareAcceleration(); //use this
//or use these two lines code
app.mandLine.appendSwitch('enable-transparent-visuals');
app.mandLine.appendSwitch('disable-gpu');

//createWindow need to wait(more than about 100ms) if you want the window to be transparent
// app.whenReady().then(createWindow); //this won't work
app.mandLine.appendSwitch('enable-transparent-visuals');
app.mandLine.appendSwitch('disable-gpu');
app.on('ready', () => {
    setTimeout(() => {
        createWindow();
    }, 200);
});