.liquid-glass { position: relative; isolation: isolate; } .liquid-glass::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 9px 1px #ffffff; background-color: rgba(255, 255, 255, 0); z-index: 0; } .liquid-glass::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; pointer-events: none; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); filter: url(#liquid-glass-filter); -webkit-filter: url(#liquid-glass-filter); isolation: isolate; z-index: -1; } .liquid-glass-fallback { position: relative; isolation: isolate; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } @supports (backdrop-filter: url(#liquid-glass-filter)) { .liquid-glass-auto { position: relative; isolation: isolate; } .liquid-glass-auto::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 9px 1px #ffffff; background-color: rgba(255, 255, 255, 0); z-index: 0; } .liquid-glass-auto::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; pointer-events: none; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); filter: url(#liquid-glass-filter); -webkit-filter: url(#liquid-glass-filter); isolation: isolate; z-index: -1; } } @supports not (backdrop-filter: url(#liquid-glass-filter)) { .liquid-glass-auto { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(3px); } }