在 Tauri2 中实现磨砂玻璃窗口效果本文记录了在 Tauri 应用中为窗口配置磨砂玻璃背景效果的两种主要方法：通过

本文记录了在 Tauri 应用中为窗口配置磨砂玻璃背景效果的两种主要方法：通过 tauri.conf.json 配置文件或使用Rust代码。

一.通过 `tauri.conf.json` 配置文件

1.配置基础窗口

下面代码省略了很多配置项


{
    "windows": [
      {
        "label": "main", // 窗口标识
        "title": "Raykit",
        "url": "/app",
        "width": 800,
        "height": 600,
        "center": true,
        "transparent": true,
      }
    ]
}

transparent参数必须要设置为true，让窗口背景透明，不然后续磨砂背景设置会不生效

2.启用磨砂玻璃效果

在窗口配置对象中添加 windowEffects 属性来定义磨砂效果。


{
    "windows": [
      {
        "label": "main",
        "title": "Raykit",
        "url": "/app",
        "width": 800,
        "height": 600,
        "decorations": false,
        "center": true,
        "transparent": true,
        "windowEffects": {
          "effects": ["hudWindow", "acrylic", "mica"],
          "radius": 12
        }
      }
    ]
}

effects (Array): 指定要应用的材质效果列表。Tauri 会尝试应用列表中当前系统支持的第一个效果。
- "hudWindow": macOS 专属的磨砂效果（类似 HUD 面板）。
- "acrylic": Windows 10/11 的亚克力效果（半透明+背景模糊）。
- "mica": Windows 11 专属的云母效果（动态主题+半透明）。
radius (Number): 当 decorations: false 时，在 macOS 上此属性是必需的。它定义了窗口的圆角半径（单位：点）。Windows 忽略此属性。

参考文档： WindowEffectsConfig - Tauri Reference

二.使用 Rust 代码

1.创建基础窗口 (`WebviewWindowBuilder`)

在 setup 钩子中使用 WebviewWindowBuilder 创建窗口。


pub fn run() {
    tauri::Builder::default()
        .setup(|app| {

            WebviewWindowBuilder::new(app, "main", WebviewUrl::default())
                // 设置窗口标题
                .title("Raykit")
                // 设置窗口大小
                .inner_size(800.0, 600.0)
                // 去除标题栏
                .decorations(false)
                // 窗口透明背景
                .transparent(true)
                .build()
                .unwrap();

            Ok(())
        })
        .plugin(tauri_plugin_opener::init())
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

transparent参数必须要设置为true，让窗口背景透明，不然后续磨砂背景设置会不生效

2.创建并应用磨砂效果 (`EffectsBuilder`)


pub fn run() {
    tauri::Builder::default()
        .setup(|app| {
            let effects = EffectsBuilder::new()
                .effects(vec![Effect::HudWindow,Effect::Acrylic])
                .radius(12.0)
                .build();

            WebviewWindowBuilder::new(app, "main", WebviewUrl::default())
                .title("Raykit")
                .inner_size(800.0, 600.0)
                .decorations(false)
                .transparent(true)
                .effects(effects)
                .build()
                .unwrap();

            Ok(())
        })
        .plugin(tauri_plugin_opener::init())
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

effects(): 接收一个 Vec<Effect>。Tauri 会尝试应用列表中当前系统支持的第一个效果。
- Effect::HudWindow: 对应配置文件中的 "hudWindow"。
- Effect::Acrylic: 对应配置文件中的 "acrylic"。
- Effect::Mica: 对应配置文件中的 "mica"。
radius(f64): 当 .decorations(false) 时，在 macOS 上此属性是必需的。设置窗口圆角半径。

3.(可选) 设置窗口主题色 (暗色/亮色)

磨砂背景主题默认是根据当前系统的主题来设置的，想设置暗色磨砂背景如下，亮色同理


pub fn run() {
    tauri::Builder::default()
        .setup(|app| {
            let effects = EffectsBuilder::new()
                .effects(vec![Effect::HudWindow,Effect::Acrylic, Effect::Blur])
                .radius(12.0)
                .build();

            WebviewWindowBuilder::new(app, "main", WebviewUrl::default())
                .title("Raykit")
                .inner_size(800.0, 600.0)
                .decorations(false)
                .transparent(true)
                .effects(effects)
                .theme(Some(Theme::Dark))
                .build()
                .unwrap();

            Ok(())
        })
        .plugin(tauri_plugin_opener::init())
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

参考文档： tauri::window::EffectsBuilder Rust Docs

关于 JavaScript API

Tauri 也提供了 JavaScript API 来动态设置窗口效果。但这通常需要在窗口创建完成（即 JS 代码执行环境准备好）之后才能调用。如果需要在应用启动时即展示磨砂效果，使用配置文件或 Rust 代码在窗口创建阶段直接配置是更推荐、更可靠的方式。

参考文档： window.effects - Tauri JS API

项目分享

我正在使用 Tauri 开发一款桌面小工具 Raykit，其中就应用了上述的磨砂玻璃效果。项目仍在积极开发中，欢迎关注或贡献！

GitHub 仓库: Raykit
功能预览: 包含本文描述的磨砂窗口实现。

如果您觉得这个项目有趣或有潜力，欢迎给个 ⭐️ Star 支持！

在 Tauri2 中实现磨砂玻璃窗口效果

一.通过 tauri.conf.json 配置文件