Make a transparent window

A transparent window has no background of its own: the desktop shows through wherever the page draws nothing. Without a frame, it becomes a widget of any shape. In this guide, a clock floats over the desktop as a rounded, half-transparent card that the user moves by dragging it.

Open the window

public class Transparent {
  public static void main(String[] args) {
    Application.launch(
        WindowParameters.builder()
            .title("Clock")
            .size(new WindowSize(300, 150))
            .position(new WindowPosition(80, 80))
            .decorated(false)
            .transparent(true)
            .alwaysOnTop(true)
            .resource("transparent/index.html")
            .build());
  }
}

• transparent(true) takes the background of the window away.
• decorated(false) takes the title bar away. Together with transparent, the window loses its whole frame, the shadow and the border too, which would outline the rectangle around the shape.

Draw the shape

The page keeps html and body without a background, and draws only the card:

<style>
  html, body { margin: 0; height: 100%; background: transparent; }
  body { display: grid; place-items: center; font-family: system-ui, sans-serif; }
  .card {
    position: relative;
    padding: 18px 28px;
    border-radius: 24px;
    background: rgba(20, 24, 33, 0.72);
    color: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }
</style>

<!-- data-lwjwae-drag: pressing the card moves the window. -->
<div class="card" data-lwjwae-drag>
  <button id="close" title="Close">✕</button>
  <div id="time"></div>
  <div id="date"></div>
</div>
<script>
  function tick() {
    const now = new Date();
    document.querySelector("#time").textContent =
      now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit", hourCycle: "h23" });
    document.querySelector("#date").textContent =
      now.toLocaleDateString([], { weekday: "long", day: "numeric", month: "long" });
  }
  tick();
  setInterval(tick, 1000);
  document.querySelector("#close").addEventListener("click", () => lwjwae.window.close());
</script>

• data-lwjwae-drag marks where the user grabs the window, as in Draw your own title bar. Buttons and fields inside it still take their clicks.
• The page draws its own shadow with box-shadow, inside the window.
• Without a frame, the page takes the pointer along every edge of the window to resize it.

Good to know

• On Linux, transparency needs a compositor, which every current desktop has. Under a bare X11 server without one, the transparent parts show black.
• A decorated window with transparent(true) keeps its title bar and frame, and shows the desktop through its content area.