v152 · css · pwa · desktop

CSS window-drag

The window-drag CSS property lets an installed desktop web app designate any element as a draggable titlebar region, enabling custom chrome layouts where the OS window can be moved by dragging parts of the web content rather than a native titlebar.

at a glance

Shipped in	Chrome 152 (Enabled by default)
Status	Enabled by default — installed desktop web apps only
Spec	CSS Basic User Interface Level 4 §window-drag
Standards position (Firefox)	No signal
Standards position (Safari)	No signal
ChromeStatus	5201338641285120 — window-drag

Source: chromestatus.com/feature/5201338641285120

why it exists

Desktop PWAs can opt into the Window Controls Overlay (WCO) display mode, which removes the browser's titlebar so the app's HTML fills the entire window frame — including the area where native window controls (close, minimise, maximise) sit. Without a way to declare draggable regions, users can no longer move the window by clicking and dragging the top of the app: all pointer events go to the web content.

The app-region CSS property (non-standard, shipped in Electron) provided a partial solution but was never standardised. window-drag is the W3C CSS-UI Level 4 replacement. Setting window-drag: drag on an element tells the OS that drag gestures on that element should move the window, while window-drag: no-drag carves out interactive sub-regions (buttons, inputs) within a drag region.

Source: chromestatus feature summary; CSS UI Level 4 §window-drag

the property

Property	`window-drag`
Applies to	All elements (effective only in installed PWAs with WCO)
Inherited	No
Initial value	`auto`
Values	`auto` — OS default (no drag region) `drag` — pointer drag on this element moves the window `no-drag` — overrides a parent `drag` to restore pointer events

Source: CSS Basic User Interface Level 4

example

/* manifest.json: enable WCO */
{
  "display_override": ["window-controls-overlay"],
  "display": "standalone"
}

/* CSS */
/* The whole header is draggable... */
.app-header {
  window-drag: drag;
  height: env(titlebar-area-height, 40px);
  /* Position header in the titlebar area */
  position: fixed;
  top: 0;
  left: env(titlebar-area-x, 0);
  width: env(titlebar-area-width, 100%);
}

/* ...except the action buttons inside it */
.app-header button,
.app-header input,
.app-header a {
  window-drag: no-drag;
}

Source: CSS UI Level 4 §window-drag

browser support