Blur background of an HTML element which has content behind it
Okay, So I tried a bunch of things and here's what I got to know:
- The backdrop filter doesn't work (Still not supported well) in the Firefox Browser.
- The backdrop filter doesn't work (or doesn't work well) with the opacity CSS property.
- For it to work (In the supported browsers like Chrome) you have to add the opacity in the background color itself, so, rather than coding it like this:
background: #000000;
opacity: 0.7;
You'd be doing something like this:
background-color: #000000a1;
/* OR */
background-color: hsla(0, 0%, 0%, 0.631);
/* OR */
background-color: rgba(0, 0, 0, 0.631);
I changed your code a bit, so that It'll look a bit more clear. I removed the red background and added a light gray background with black text and I also removed the z-index and the width and replaced it with a padding.
So the end result would be:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
font-family: Segoe UI, sans-serif;
}
header {
position: fixed;
width: 100%;
padding: 10px;
background: rgba(0, 0, 0, 0.692);
color: white;
backdrop-filter: saturate(90%) blur(1px);
}
main {
background: #eeeeee;
font-weight: 600;
}
</style>
</head>
<body>
<header>Header</header>
<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis. Est ante in nibh mauris cursus mattis molestie. Nisl purus in mollis
nunc sed. Enim eu turpis egestas pretium aenean pharetra magna ac placerat. Dolor morbi non arcu risus. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo. Est ante in
nibh mauris cursus mattis molestie. Varius morbi enim nunc faucibus. Volutpat ac tincidunt vitae semper quis. Lectus quam id leo in vitae. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Dolor magna eget est lorem
ipsum dolor sit amet consectetur. Morbi tempus iaculis urna id volutpat lacus laoreet. Elementum integer enim neque volutpat ac tincidunt. Ut pharetra sit amet aliquam id diam. Tincidunt nunc pulvinar sapien et ligula. Rhoncus aenean vel elit scelerisque
mauris. Nec feugiat nisl pretium fusce id velit ut. Sed odio morbi quis commodo. Id ornare arcu odio ut sem nulla pharetra diam. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Molestie a iaculis at erat pellentesque. Justo eget magna
fermentum iaculis eu non. Cursus turpis massa tincidunt dui ut. Volutpat maecenas volutpat blandit aliquam. Varius duis at consectetur lorem donec massa sapien faucibus et. Etiam non quam lacus suspendisse faucibus interdum posuere. Aliquet enim tortor
at auctor urna nunc id. Porta non pulvinar neque laoreet. Ut placerat orci nulla pellentesque dignissim enim sit. Mi sit amet mauris commodo quis imperdiet massa. Elementum facilisis leo vel fringilla est. Non odio euismod lacinia at. Erat pellentesque
adipiscing commodo elit at imperdiet dui accumsan. Scelerisque purus semper eget duis at tellus. Scelerisque viverra mauris in aliquam sem fringilla. Consequat mauris nunc congue nisi. Vestibulum lectus mauris ultrices eros in cursus turpis massa.
Aliquam nulla facilisi cras fermentum odio. Tortor pretium viverra suspendisse potenti nullam ac tortor. Bibendum arcu vitae elementum curabitur vitae. Pretium aenean pharetra magna ac. Felis donec et odio pellentesque diam volutpat commodo. Lobortis
feugiat vivamus at augue eget. Egestas fringilla phasellus faucibus scelerisque. Turpis nunc eget lorem dolor. Congue quisque egestas diam in arcu. Massa tincidunt nunc pulvinar sapien et. Mattis aliquam faucibus purus in massa. Sed enim ut sem viverra.
Congue quisque egestas diam in arcu cursus euismod quis viverra. Sit amet commodo nulla facilisi nullam vehicula ipsum a. Id eu nisl nunc mi. Penatibus et magnis dis parturient. Condimentum mattis pellentesque id nibh tortor. Mollis aliquam ut porttitor
leo a. Vulputate dignissim suspendisse in est ante in nibh. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Turpis nunc eget lorem dolor sed viverra.
Fringilla phasellus faucibus scelerisque eleifend donec. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Diam vel quam elementum pulvinar etiam non quam lacus. Lacus luctus accumsan tortor posuere ac ut consequat. Posuere morbi
leo urna molestie at elementum eu facilisis sed. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Blandit cursus risus at ultrices mi. Eget nulla facilisi etiam dignissim diam quis. Eleifend donec pretium vulputate sapien
nec sagittis aliquam malesuada bibendum. Ut sem nulla pharetra diam sit amet. Orci dapibus ultrices in iaculis nunc. Condimentum lacinia quis vel eros. Ultrices eros in cursus turpis. Pretium fusce id velit ut tortor. Lectus proin nibh nisl condimentum
id. Feugiat vivamus at augue eget arcu. Sem viverra aliquet eget sit amet tellus. Quis lectus nulla at volutpat diam.
</main>
</body>
</html>* {
padding: 0;
margin: 0;
font-family: Segoe UI, sans-serif;
}
header {
position: fixed;
z-index: 999;
width: 100%;
height: 50px;
background: rgba(255,255,255,.2);
color: white;
backdrop-filter: saturate(180%) blur(2px);
}
main {
background: red;
}<header>
Header
</header>
<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis. Est ante in nibh mauris cursus mattis molestie. Nisl purus in mollis
nunc sed. Enim eu turpis egestas pretium aenean pharetra magna ac placerat. Dolor morbi non arcu risus. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo. Est ante in
nibh mauris cursus mattis molestie. Varius morbi enim nunc faucibus. Volutpat ac tincidunt vitae semper quis. Lectus quam id leo in vitae. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Dolor magna eget est lorem ipsum
dolor sit amet consectetur. Morbi tempus iaculis urna id volutpat lacus laoreet. Elementum integer enim neque volutpat ac tincidunt. Ut pharetra sit amet aliquam id diam. Tincidunt nunc pulvinar sapien et ligula. Rhoncus aenean vel elit scelerisque
mauris. Nec feugiat nisl pretium fusce id velit ut. Sed odio morbi quis commodo. Id ornare arcu odio ut sem nulla pharetra diam. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Molestie a iaculis at erat pellentesque. Justo eget magna
fermentum iaculis eu non. Cursus turpis massa tincidunt dui ut. Volutpat maecenas volutpat blandit aliquam. Varius duis at consectetur lorem donec massa sapien faucibus et. Etiam non quam lacus suspendisse faucibus interdum posuere. Aliquet enim tortor
at auctor urna nunc id. Porta non pulvinar neque laoreet. Ut placerat orci nulla pellentesque dignissim enim sit. Mi sit amet mauris commodo quis imperdiet massa. Elementum facilisis leo vel fringilla est. Non odio euismod lacinia at. Erat pellentesque
adipiscing commodo elit at imperdiet dui accumsan. Scelerisque purus semper eget duis at tellus. Scelerisque viverra mauris in aliquam sem fringilla. Consequat mauris nunc congue nisi. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Aliquam
nulla facilisi cras fermentum odio. Tortor pretium viverra suspendisse potenti nullam ac tortor. Bibendum arcu vitae elementum curabitur vitae. Pretium aenean pharetra magna ac. Felis donec et odio pellentesque diam volutpat commodo. Lobortis feugiat
vivamus at augue eget. Egestas fringilla phasellus faucibus scelerisque. Turpis nunc eget lorem dolor. Congue quisque egestas diam in arcu. Massa tincidunt nunc pulvinar sapien et. Mattis aliquam faucibus purus in massa. Sed enim ut sem viverra. Congue
quisque egestas diam in arcu cursus euismod quis viverra. Sit amet commodo nulla facilisi nullam vehicula ipsum a. Id eu nisl nunc mi. Penatibus et magnis dis parturient. Condimentum mattis pellentesque id nibh tortor. Mollis aliquam ut porttitor leo
a. Vulputate dignissim suspendisse in est ante in nibh. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Turpis nunc eget lorem dolor sed viverra. Fringilla
phasellus faucibus scelerisque eleifend donec. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Diam vel quam elementum pulvinar etiam non quam lacus. Lacus luctus accumsan tortor posuere ac ut consequat. Posuere morbi leo urna molestie
at elementum eu facilisis sed. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Blandit cursus risus at ultrices mi. Eget nulla facilisi etiam dignissim diam quis. Eleifend donec pretium vulputate sapien nec sagittis aliquam
malesuada bibendum. Ut sem nulla pharetra diam sit amet. Orci dapibus ultrices in iaculis nunc. Condimentum lacinia quis vel eros. Ultrices eros in cursus turpis. Pretium fusce id velit ut tortor. Lectus proin nibh nisl condimentum id. Feugiat vivamus
at augue eget arcu. Sem viverra aliquet eget sit amet tellus. Quis lectus nulla at volutpat diam.
</main>Here is a working snippet. I think the opacity broke the backdrop-filter. Addind a background-color with rgba(255,255,255,.2) fixed it. I just fine-tuned the values for a better effect.