I am having some issues with applying the backdrop-filter to some components of the website. It appears to me that this property works just fine on most occasions, however, there are some instances when I am not seeing any changes to the design and the blur is not being applied. Currently, I am using Google Chrome to view my website - so compatibility should not be an issue. Please find the applied code below.
HTML:
<div class="content">
<h1 class="hero-title">Castles.</h1>
<p>
Glasgow Science Centre is a visitor attraction on the south bank of
the River Clyde in Glasgow, Scotland, in the Clyde Waterfront
Regeneration region. The Glasgow Science Centre was inaugurated by
Queen Elizabeth II on July 5, 2001. It is one of the most popular
paid-for tourist attractions in Scotland.
</p>
</div>CSS:
.content p {
font-size: 18px;
margin: 3rem 0;
font-weight: 300;
position: relative;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(2rem);
-webkit-backdrop-filter: blur(2rem);
}There is no problem your code, but Mozilla and internet explorer do not support the backdrop-filter property. You can check the link for browser compatibility.
.content{
background-image: url(https://picsum.photos/900/300), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
background-size:contain;
padding:100px;
}
.content p {
padding:10px;
font-size: 18px;
margin: 3rem 0;
font-weight: 300;
position: relative;
color:#fff;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(2rem);
-webkit-backdrop-filter: blur(2rem);
}<div class="content">
<h1 class="hero-title">Castles.</h1>
<p>
Glasgow Science Centre is a visitor attraction on the south bank of
the River Clyde in Glasgow, Scotland, in the Clyde Waterfront
Regeneration region. The Glasgow Science Centre was inaugurated by
Queen Elizabeth II on July 5, 2001. It is one of the most popular
paid-for tourist attractions in Scotland.
</p>
</div>