Try #3105:

Cargo.toml

@@ -452,6 +452,10 @@ path = "examples/window/multiple_windows.rs"
 name = "scale_factor_override"
 path = "examples/window/scale_factor_override.rs"
 
+[[example]]
+name = "transparent_window"
+path = "examples/window/transparent_window.rs"
+
 [[example]]
 name = "window_settings"
 path = "examples/window/window_settings.rs"

crates/bevy_window/src/window.rs

@@ -535,6 +535,11 @@ pub struct WindowDescriptor {
     pub cursor_visible: bool,
     pub cursor_locked: bool,
     pub mode: WindowMode,
+    /// Sets whether the background of the window should be transparent.
+    /// # Platform-specific
+    /// - iOS / Android / Web: Unsupported.
+    /// - OSX: Not working as expected.
+    pub transparent: bool,
     #[cfg(target_arch = "wasm32")]
     pub canvas: Option<String>,
 }
@@ -554,6 +559,7 @@ impl Default for WindowDescriptor {
             cursor_locked: false,
             cursor_visible: true,
             mode: WindowMode::Windowed,
+            transparent: false,
             #[cfg(target_arch = "wasm32")]
             canvas: None,
         }

crates/bevy_winit/src/winit_windows.rs

@@ -76,7 +76,8 @@ impl WinitWindows {
                 }
             }
             .with_resizable(window_descriptor.resizable)
-            .with_decorations(window_descriptor.decorations),
+            .with_decorations(window_descriptor.decorations)
+            .with_transparent(window_descriptor.transparent),
         };
 
         let constraints = window_descriptor.resize_constraints.check_constraints();

examples/README.md

@@ -247,6 +247,7 @@ Example | File | Description
 `clear_color` | [`window/clear_color.rs`](./window/clear_color.rs) | Creates a solid color window
 `multiple_windows` | [`window/multiple_windows.rs`](./window/multiple_windows.rs) | Creates two windows and cameras viewing the same mesh
 `scale_factor_override` | [`window/scale_factor_override.rs`](./window/scale_factor_override.rs) | Illustrates how to customize the default window settings
+`transparent_window` | [`window/transparent_window.rs`](./window/transparent_window.rs) | Illustrates making the window transparent and hiding the window decoration
 `window_settings` | [`window/window_settings.rs`](./window/window_settings.rs) | Demonstrates customizing default window settings
 
 # Platform-Specific Examples

examples/window/transparent_window.rs

@@ -0,0 +1,32 @@
+/// An example of how to display a window in transparent mode
+/// [Documentation & Platform support.](https://github.com/bevyengine/bevy/blob/latest/crates/bevy_window/src/window.rs)
+use bevy::{prelude::*, render::pass::ClearColor, window::WindowDescriptor};
+
+fn main() {
+    App::new()
+        // ClearColor must have 0 alpha, otherwise some color will bleed through
+        .insert_resource(ClearColor(Color::NONE))
+        .insert_resource(WindowDescriptor {
+            // Setting `transparent` allows the `ClearColor`'s alpha value to take effect
+            transparent: true,
+            // Disabling window decorations to make it feel more like a widget than a window
+            decorations: false,
+            ..Default::default()
+        })
+        .add_startup_system(setup)
+        .add_plugins(DefaultPlugins)
+        .run();
+}
+
+fn setup(
+    mut commands: Commands,
+    asset_server: Res<AssetServer>,
+    mut materials: ResMut<Assets<ColorMaterial>>,
+) {
+    let texture_handle = asset_server.load("branding/icon.png");
+    commands.spawn_bundle(OrthographicCameraBundle::new_2d());
+    commands.spawn_bundle(SpriteBundle {
+        material: materials.add(texture_handle.into()),
+        ..Default::default()
+    });
+}