Electron make transparent circle in window?

Question

Is there any way to make a portion of the electron window transparent? Like for example the area where the move is moved over?

I have the following snippet in my electron file:

const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    },
    transparent: true,
    frame: false,
    ...
  })

And the following CSS:

html, body {
  cursor: none;
  background-color: #121212;
}

.cursor {
  width: 40px;
  height: 40px;
  border: 2px solid #fefefe;
  border-radius: 100%;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
}

When I disable the background color of the html, everything works as expected, the circle is see-through and so is the window:

The problem is when I show the background color I can see the background through the circle that is following the cursor:

I am trying to make it so the window is transparent inside that circle that is following the cursor position, so I can see the desktop behind the electron window through the cursor following circle.

score 0 · Accepted Answer · answered Nov 25 '20 at 19:57

Figured it out!

Turns out I can use a box-shadow around the cursor circle:

.cursor {
  width: 40px;
  height: 40px;
  border: 2px solid #fefefe;
  border-radius: 100%;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 1);
}

Thanks to: Hole in overlay with CSS

Electron make transparent circle in window?

1 Answers1