How to make transparent windows in Godot

Illustration of a transparent window on top of another window

Here's how to make the main window or a window node transparent in Godot 4 without using code. Unlocking the potential to make your own BonziBuddy.

Make the main window transparent

  1. Open Project Settings
  2. Ensure Advanced Settings is toggled on
  3. Go to Display > Window > Size
  4. Enable the Transparent and the Borderless toggle [1]
  5. Go to Display > Window > Per Pixel Transparency
  6. Enable the Allowed toggle

Screenshot of the per pixel transparency setting

  1. Still in Project Settings, go to Rendering > Viewport
  2. Enable the Transparent Background toggle

Screenshot of the transparent viewport background setting

Make a Window node transparent

  1. Select the Window node you want to make transparent
  2. In the Inspector panel, go to Window > Flags
  3. Enable the Borderless and Transparent toggle
  4. Scroll down to the Viewport section in the Inspector
  5. Enable the Transparent BG toggle

If you want Window nodes to appear outside the main window, go into Project Settings and turn off Display > Window > Subwindows > Embedded Subwindows.

Screenshot of the embedded subwindows setting

Other resources

Footnotes

  1. The Borderless setting is required for Windows and Linux, without it the window border and title bar will show. On macOS it isn't required for some reason.
Posted on