스페이셜 글래스 머티리얼

<div class="envbg" id="envbg"></div><div class="gpanel" id="gpanel"><span>Glass</span></div>

.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}

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);