Custom Window Styles

Frameless windows

A frameless window removes all chrome applied by the OS, including window controls.

To create a frameless window, set the BaseWindowContructorOptions frame param in the BrowserWindow constructor to false.

docs/fiddles/features/window-customization/custom-window-styles/frameless-windows (41.2.0)Open in Fiddle

main.js

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 300,
    height: 200,
    frame: false
  })
  win.loadURL('https://example.com')
}

app.whenReady().then(() => {
  createWindow()
})

On Wayland (Linux), frameless windows have GTK drop shadows and extended resize boundaries by default. To create a fully frameless window with no decorations, set hasShadow: false in the window constructor options.

Transparent windows

To create a fully transparent window, set the BaseWindowContructorOptions transparent param in the BrowserWindow constructor to true.

The following fiddle takes advantage of a transparent window and CSS styling to create the illusion of a circular window.

docs/fiddles/features/window-customization/custom-window-styles/transparent-windows (41.2.0)Open in Fiddle

main.js

const { app, BrowserWindow } = require