How do I blur an electron BrowserWindow with transparency

To blur the page when the Electron browser window loses focus, we can listen for the window's blur and focus events. Here are the specific steps and code examples:

Step 1: Set Up Event Listeners

First, add listeners in the main process code when creating the window.

javascript
// Import app and BrowserWindow
const { app, BrowserWindow } = require('electron');

function createWindow() {
  // Create the browser window
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // Load index.html file
  win.loadFile('index.html');

  // Listen for window blur event
  win.on('blur', () => {
    win.webContents.send('window-blurred');
  });

  // Listen for window focus event
  win.on('focus', () => {
    win.webContents.send('window-focused');
  });
}

app.whenReady().then(createWindow);

Step 2: Handle Events in the Renderer Process

Next, in the renderer process code (e.g., renderer.js), handle the messages sent from the main process.

javascript
const { ipcRenderer } = require('electron');

// Listen for window blur event
ipcRenderer.on('window-blurred', () => {
  document.body.classList.add('blurred');
});

// Listen for window focus event
ipcRenderer.on('window-focused', () => {
  document.body.classList.remove('blurred');
});

Step 3: Add CSS to Implement the Blur Effect

Finally, add the necessary styles in the page's CSS file to achieve the blur effect.

css
/* style.css */
body.blurred {
  filter: blur(5px);
  transition: filter 0.3s ease-in-out;
}

This approach creates a blur effect on the page content when the Electron application window loses focus and restores it when the window regains focus. This method not only improves user experience but also enhances the visual appeal of the application.