xxxxxxxxxx
backdrop-filter might create a lag effect on your page while scrolling
xxxxxxxxxx
div.transbox {
background-color: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
xxxxxxxxxx
/* Keyword value */
backdrop-filter: none;
/* URL to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);
/* <filter-function> values */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);
/* Multiple filters */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
/* Global values */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;
backdrop-filter in css
xxxxxxxxxx
backdrop-filter: blur(10px) brightness(0.8) saturate(1.2);
-webkit-backdrop-filter: blur(10px) brightness(0.8) saturate(1.2);
-moz-backdrop-filter: blur(10px) brightness(0.8) saturate(1.2);
-o-backdrop-filter: blur(10px) brightness(0.8) saturate(1.2);
[[[[[[[[[[[ BROWSER SUPPORT ]]]]]]]]]]]]] :
function checkBackdropFilterSupport() {
const el = document.createElement('div');
el.style.backdropFilter = 'blur(10px)';
return el.style.backdropFilter !== '';
}
happy happy happy *banana cat cry*
xxxxxxxxxx
<div class="container">
<div class="box">
<p>backdrop-filter: blur(5px)</p>
</div>
</div>