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)	Positive (position #1409)
Standards position (Safari)	No signal (position #668)
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: move on an element tells the OS that drag gestures on that element should move the window, while window-drag: none carves out interactive sub-regions (buttons, inputs) within a drag region.

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

the property: syntax and values

window-drag: none | move;

Property	Description
Property name	`window-drag`
Applies to	All elements (effective in installed PWAs with Window Controls Overlay)
Inherited	Yes
Initial value	`none`
Values	`none` — Normal element behavior; dragging does not move the window. `move` — Pointer drag on this element moves the top-level application window.

Syntax divergence note: The normative CSS Basic User Interface Level 4 specification (§8.1, fetched 2026-10-07) and Chromium implementation (CL 7858427, Intent to Ship) define the property values as none | move (initial: none, inherited: yes). An earlier unstandardized property (app-region / -webkit-app-region) used drag and no-drag with an auto default. In Chromium, legacy drag and no-drag continue to be supported as surrogates for backwards compatibility, while window-drag standardizes on move and none.

Source: CSS Basic User Interface Level 4; Chromium CL 7858427.

example

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

/* CSS */
/* The whole header is draggable... */
.app-header {
  window-drag: move;
  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: none;
}

Source: CSS UI Level 4 §window-drag

browser support

Browser	Support	Notes
Chrome	Chrome 152+ (desktop only)	Desktop PWAs with Window Controls Overlay only
Edge	Edge 152+	Desktop PWAs with Window Controls Overlay only
Firefox	Positive signal (mozilla/standards-positions #1409)	Not yet shipped
Safari	No signal (WebKit/standards-positions #668)	Not yet shipped

Security and privacy: The window-drag property is effective only in installed desktop web apps operating in standalone or window-controls-overlay display modes. It does not permit dragging in ordinary tabbed browser contexts, preventing web content from intercepting OS window movement or spoofing window chrome.