Finally Solution to attain Blurred UI/LIQUID GLASS FOR FREE! in UI TOOLKIT

UI UI Toolkit
, ,
1

Glassmorphism in Unity 6.3 UI Toolkit — For Free (No Packages, No Shaders)

Unity Version: 6.3
UI System: UI Toolkit
Cost: Free — No third-party packages or custom shaders required

The Problem

Glassmorphism — the frosted glass effect common in modern UI — normally relies on:

backdrop-filter: blur(10px); /* CSS/web only */

Unity 6.3’s UI Toolkit does not support backdrop-filter. The usual workarounds require paid Asset Store packages or custom URP/HLSL shaders with significant setup overhead.

This trick achieves a convincing frosted glass look using only built-in UI Toolkit features and a USS stylesheet.

How It Actually Works

:warning: Important clarification: UI Toolkit’s filter: blur() does not sample the framebuffer behind an element. Per the Unity docs, it renders the element’s own subtree (its content and children) to a texture, applies the blur shader to that, and reinserts it. A transparent empty element would blur nothing.

The real trick is this: give the glass-bg element the same background image as your scene background, then blur it in place, clipped by its parent’s overflow: hidden.

Because the image matches and scales the same way as your real background, the blurred copy looks like the background itself is frosted — even though it’s technically a duplicate image rendered and blurred inside the element’s own subtree.

Step-by-Step Guide

Step 1 — Set Up Your Scene Background

Place a full-screen background element with your background image:

.background-haze {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("project:/Assets/Images/your-background.png");
    -unity-background-scale-mode: scale-and-crop;
    -unity-background-image-tint-color: rgba(255, 255, 255, 0.3);
}

Step 2 — Create the Panel That Will Have the Glass Effect

This is your visible UI card/panel. The critical requirement is overflow: hidden — this clips the blur bleed at the panel edges.

.glass-panel {
    position: relative;
    width: 400px;
    height: 300px;
    border-radius: 16px;
    overflow: hidden; /* ← REQUIRED — clips blur bleed */
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.08);
}

Step 3 — Add a glass-bg Child Element

Inside the panel, add an absolutely-positioned child that fills it completely. This is the element that creates the frosted glass illusion.

USS:

.glass-bg {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;

    /* Same image as your scene background — this is the key */
    background-image: url("project:/Assets/Images/your-background.png");
    -unity-background-scale-mode: scale-and-crop;

    /* Dark tint for the frosted look */
    -unity-background-image-tint-color: rgba(0, 0, 0, 0.65);

    filter: blur(20px);   /* The blur radius — adjust to taste */
    opacity: 0.99;         /* Forces a compositing layer — improves quality */
    overflow: hidden;
}

UXML:

<ui:VisualElement class="glass-panel">

    <!-- Must be the FIRST child so it sits behind everything else -->
    <ui:VisualElement class="glass-bg"/>

    <!-- Your actual panel content goes here -->
    <ui:Label text="Panel Title" class="panel-title"/>
    <ui:Label text="Some content..." class="panel-body"/>

</ui:VisualElement>

Step 4 — Polish the Glass Look

Add finishing details to the panel to complete the glassmorphism aesthetic:

.glass-panel {
    overflow: hidden;
    border-radius: 16px;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.12);   /* Subtle light rim */
    background-color: rgba(255, 255, 255, 0.03); /* Very faint tint over the blur */
}

Visual Structure

┌──────────────────────────────────────────┐
│  .glass-panel  (overflow: hidden)        │
│  ┌────────────────────────────────────┐  │
│  │  .glass-bg  (position: absolute)  │  │  ← same image + filter: blur()
│  │  [duplicate background, blurred]  │  │
│  └────────────────────────────────────┘  │
│                                          │
│  [ Panel content sits above glass-bg ]  │
│                                          │
└──────────────────────────────────────────┘

Scene background image (full screen, unblurred)
sits behind the entire panel in the hierarchy

Full USS Reference

/* ── Scene background ─────────────────────────────────────── */
.background-haze {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("project:/Assets/Images/your-background.png");
    -unity-background-scale-mode: scale-and-crop;
    -unity-background-image-tint-color: rgba(255, 255, 255, 0.3);
}

/* ── Glass panel container ────────────────────────────────── */
.glass-panel {
    position: relative;
    width: 400px;
    height: 300px;
    border-radius: 16px;
    overflow: hidden;                            /* clips blur bleed — required */
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.03);
}

/* ── Frosted glass layer ──────────────────────────────────── */
.glass-bg {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    background-image: url("project:/Assets/Images/your-background.png");
    -unity-background-scale-mode: scale-and-crop;
    -unity-background-image-tint-color: rgba(0, 0, 0, 0.65);
    filter: blur(20px);
    opacity: 0.99;
    overflow: hidden;
}

Key Details to Get Right

Detail Why It Matters
glass-bg uses the same image as background Alignment makes the blur look like it’s frosting the actual background
Parent panel has overflow: hidden Without this, blur bleeds visibly past the panel edges
opacity: 0.99 on glass-bg Forces a compositing layer — ensures blur fully resolves before blending
glass-bg is the first child in UXML It renders behind your actual panel content
scale-and-crop on both elements Keeps the duplicate image aligned with the real background

Honest Caveats

  • This is a static image approximation, not a true real-time backdrop blur. The glass-bg is a blurred copy of the background image — it does not dynamically reflect any moving game content beneath it. For games with a still or slow-moving background this looks convincing; for fully dynamic scenes you would need a render texture approach.
  • filter: blur() has a real GPU cost. Keep blur radii in the 10–25px range and avoid stacking many blurred elements simultaneously.
  • If your background changes (e.g. different scenes), you need to update the background-image on your glass-bg elements to match.

Tested on Unity 6.3 with UI Toolkit. Screenshots from my project attached Below - HERE I didn’t blurred the panels but the Background image But you can absolutely blur the panels and so on.. And its content including text, media and so on would not get blurred, i hope this work if you have any Problem please do ask ill reply.

image-2
image-21919×833 147 KB

4 Likes
Suggesting native Glassmorphism support in UI Toolkit for modern, transparent UI designs
2

filter: blur() works by rendering the element’s own subtree (its content and children) to a texture, applying the blur shader to that texture, then reinserting it. Per the docs:

Filters use materials to apply effects to a visual element subtree per-pixel. For example, to post-process a red element, its content and children are rendered to a texture, which can then be processed by a shader.

This means Panel B with a transparent or near-transparent background is blurring its own (essentially empty) subtree → afaiu, it should not sample the framebuffer behind it. The overlay trick you describe should not change what the filter operates on

1 Like
3

Thanks!! for the reply i forgot to make 1 correction Now i guess the trick may Work!

2 Likes
4

Great work, and thanks for sharing

2 Likes
5

Looks like your issue is resolved I think u should read it again becuase for me it works