1. Non‑transparent frameless windows (OS‑provided drop shadow)
Starting with io.Connect Desktop 9.9.0, you can create non‑transparent frameless windows via window.open:
const url = "https://example.com";
// Opening a non-transparent frameless window.
const options = "mode=frameless,transparent=false";
window.open(url, undefined, options);
For these windows:
The drop shadow is drawn by the Windows OS, not by io.Connect Desktop.
On Windows, if the OS setting Show shadows under windows (System Properties → Performance Options) is enabled (default), then non‑transparent frameless windows will have a drop shadow.
If that OS setting is disabled (e.g. via group policy, Citrix / Remote Desktop / VDI configuration, or local user changes), no drop shadow will appear, even for non‑transparent frameless windows. In that case we cannot add a replacement shadow from io.Connect Desktop, as these windows are ultimately owned and drawn by Electron / Chromium.
Note:
Groups/workspaces can have drop shadows in all cases because we draw custom shadows for them.
This is not possible for frameless windows as they rely on the OS behavior described above.
2. Transparent frameless windows (Custom CSS drop shadow)
If you need consistent drop shadows on frameless windows regardless of OS “Performance Options” or environment (local, Citrix, RDP, etc.), you should use transparent frameless windows and implement the shadow in your own HTML/CSS:
const url = "https://example.com";
// Opening a transparent frameless window – shadow will be provided by your HTML/CSS.
const options = "mode=frameless,transparent=true";
window.open(url, undefined, options);
Transparent windows can have arbitrary visible shapes (e.g., circle, diamond, “kitten‑shaped” window), so Windows does not apply its standard rectangular shadow, so the OS will not provide any drop shadow.
You can implement the visual shadow yourself with CSS (e.g. box-shadow) inside your HTML which is more stable and customizable.
Example:
.window-shell {
width: 100%;
height: 100%;
background: #ffffff;
box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
}
/* Make a region draggable in a frameless window */
.drag-area {
-webkit-app-region: drag;
height: 32px;
}
UX note
When you add large shadows inside a transparent frameless window, the resize and drag hot‑zones (provided by Electron/Chromium) remain at the outer edge of the window, not at the visible content edge.
This can make the window feel like there is a “gap” where the user has to grab slightly outside the visible box to resize or drag. This is a platform limitation.