Design Atlas
한국어
◫ Spatial UI & XR

Spatial glass material

스페이셜 글래스 머티리얼

The glass a window is made of adapting its own tint and brightness to whatever real or virtual environment sits behind it.

Also known as: Adaptive glassEnvironmental tinting
···
html
<div class="envbg" id="envbg"></div><div class="gpanel" id="gpanel"><span>Glass</span></div>
css
.envbg{position:absolute;inset:0;transition:background 2.6s ease}
.gpanel{position:relative;width:min(56%,220px);height:min(56%,140px);border-radius:18px;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:clamp(12px,3.4vmin,15px);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background 2.6s ease,box-shadow 2.6s ease,border-color 2.6s ease}
js
const envs=[
  { bg:'radial-gradient(circle at 50% 30%,#1c1e30,#08080e 72%)', glass:'linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02))', shadow:'0 20px 40px rgba(0,0,0,.5)', border:'rgba(255,255,255,.14)' },
  { bg:'radial-gradient(circle at 50% 30%,#ffd9a0,#ff9d5c 72%)', glass:'linear-gradient(160deg,rgba(255,255,255,.42),rgba(255,255,255,.12))', shadow:'0 20px 40px rgba(120,60,0,.35)', border:'rgba(255,255,255,.55)' },
  { bg:'radial-gradient(circle at 50% 30%,#7bdff2,#2b7de0 72%)', glass:'linear-gradient(160deg,rgba(255,255,255,.30),rgba(255,255,255,.08))', shadow:'0 20px 40px rgba(0,40,90,.4)', border:'rgba(255,255,255,.4)' },
];
const envbg=document.getElementById('envbg'), panel=document.getElementById('gpanel');
document.body.style.background = 'transparent';
let i=0;
function apply(){
  const e=envs[i];
  envbg.style.background=e.bg;
  panel.style.background=e.glass;
  panel.style.boxShadow=e.shadow+', inset 0 1px 0 '+e.border;
  panel.style.border='1px solid '+e.border;
}
apply();
setInterval(()=>{ i=(i+1)%envs.length; apply(); }, 2800);

Spatial UI's glass material isn't just a static translucent panel — it responds to what's behind it. In a bright room the glass reads brighter and crisper; in a dark room or a night scene, it shifts darker and softer. That keeps text contrast readable against any backdrop, and makes the window feel like an object actually sitting in that space.

Where liquid-glass (in the effects category) focuses on the optical texture of glass — refraction, specular highlights — this entry focuses on that material adapting its tone over time to match the surrounding environment. The two concepts overlap but emphasize different things.

The demo shifts the background color slowly while the glass panel's own tone — brightness and hue — tracks it. The panel's rim highlight also intensifies when the background is brighter.

When to use

Essential whenever the backdrop behind a window varies — moving between rooms, switching to night mode. It is almost always safer than a static glass tuned for one fixed background.