Is there a way to remove backdrop-filter: blur effect from elements within a div?

Having an issue with a CSS property. I have designed a modal that includes inputs and labels, and I want to blur the background content. However, the problem I am facing is that the blur effect is also being applied to all elements inside the container, including text and inputs. Any suggestions on how to resolve this? Here's my container code:

const StyledModal = styled.div`
  position: relative;
  overflow: auto;
  z-index: 100;
  width: fit-content;
  max-height: fit-content;
  padding: 47px 41px 61px;
  display: flex;
  border: 1px solid ${({ theme }) => theme.colors.primary};
  border-radius: ${({ theme }) => theme.borderRadiusLarge};
  background: linear-gradient(
    180deg,
    rgba(92, 192, 190, 0.4) 0%,
    rgba(92, 192, 190, 0.4) 100%
  );
  backdrop-filter: blur(200px);
`;

Appreciate any help offered on solving this dilemma!

htmlcssblur

Answer №1

I decided to add a new backdrop element and strategically placed it with a negative index so that it appears behind all other elements on the page.

.parent {
  position: relative;
  height: 250px;
  width: 250px;
  z-index: 0;
  background-image: url('https://picsum.photos/id/237/200/300');
  background-size: cover;
  background-repeat: no-repeat;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  backdrop-filter: blur(20px);
  z-index: -1;
}
<div class="parent">
  <div class="background"></div>
  Text not getting blurred
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to automatically close a created div by clicking anywhere outside of it?

I'm facing an issue with a dynamically created div that I want to close by clicking outside of it. However, when I try to achieve this functionality, the div closes immediately as soon as it is opened. closediv(); } function closediv() { d ...

javascripthtmlweb

steps to receive an event within an AngularJS function

I'm encountering an issue with the event display in this code. <div class="div1" ng-click="displayinfo(event)"> sadfasf </div> $scope.displayinfo = function(event) { alert(event); } Does anyone have a solution for this problem? ...

htmlangularjs

The dropdown menu is obscured by the toolbar

When using ionic4/angular, I want a dropdown menu to display upon clicking on the ion-avatar. However, the dropdown menu is hiding in the toolbar. I have tried setting z-index but it did not work. Any suggestions would be appreciated. You can find the sta ...

htmlcssionic-frameworkbootstrap-4ionic4

I'm noticing that my style.css changes are only showing up after a hard refresh, but then they revert back to an older version when I refresh normally

Apologies for the lengthy title. Here's the issue: I have a WordPress website with a custom theme and its corresponding child theme. Previously, updating the style.css file of the child theme would show the changes immediately after a website refresh ...

htmlcsswordpresscachingweb

Remove the option to delete without making any changes to the flash file

Utilizing the DataTable javascript tool to export a grid, I have obtained the following HTML generated code: <div class="DTTT_container"> <a class="DTTT_button DTTT_button_copy" id="ToolTables_example_0" tabindex="0" aria-controls="e ...

javascriptjqueryhtmlflashdom

How can I center two images using a hover effect in WordPress?

When the mouse hovers over an image, it changes to another image. Everything works smoothly except for one issue - the image is not centered. Below is the code I am currently using: HTML: <figure> <a> <img class="hover" src="na ...

htmlcss

What is the reason behind Internet Explorer 11 not supporting conditional comments in HTML? Has this feature been dropped?

I'm having an issue trying to show different content on various web browsers. When using Internet Explorer 11 and Google Chrome 39, the message displayed is "Not Internet Explorer" instead of the expected result. Is there a problem with my code? It&ap ...

htmlinternet-explorerinternet-explorer-11conditional-comments

Changing the size of the Modal Panel in Ui Bootstrap for a customized look

Currently, I am in the process of developing an application that utilizes Ui bootstrap to seamlessly integrate various Bootstrap components with AngularJs. One of the key features I require is a modal panel, however, I found that the default size option &a ...

angularjscsstwitter-bootstrap

Angular Material has support for displaying nested optgroups within select components

Upon reviewing a question on Stack Overflow, I learned that nested optgroups are not supported in the HTML5 spec. While it is possible to manually style them, I am curious if Angular Material offers a solution. Angular Material internally swaps many eleme ...

javascripthtmlcssangularjsangular-material

What is the best location to integrate jQuery UI Bootstrap in a Rails project

In order to use Bootstrap and jQuery UI together in my application, I decided to integrate jQuery UI Bootstrap. Unfortunately, many of the gems that handle asset pipeline integration seem outdated, so I opted to manually download the CSS files and insert t ...

jquerycssruby-on-railstwitter-bootstrapjquery-ui

Displaying default tab content while hiding other tab content in Javascript can be achieved through a simple code implementation

I have designed tabs using the <button> element and enclosed the tab content within separate <div></div> tags like shown below: function displayTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsB ...

javascripthtmlcss

Release a stationary element upon scrolling down the page

I have a calculator feature on my website which was coded in php. At the end of this calculator, there is a section that displays the results. While the results div works properly on desktop, I am looking to implement a fix for mobile devices. Specificall ...

javascriptjquerycsssticky

Preventing Event Propagation in Jquery is Quite a Challenge

I'm feeling a bit perplexed. I have a list of names with checkboxes next to them, and this list is generated dynamically after making a request to the backend. The issue is that every time I click on a checkbox, it immediately becomes unchecked. I no ...

jqueryhtmlstoppropagation

Tips for sending parameters to a web service URL through a Phonegap HTML page

In my Phone Gap application, I have an HTML page where I need to pass the values like name, contact, etc. to a Webservice URL. However, I am unsure of where to write the code and how to call the webservice URL. Here is a snippet of my HTML code: <div ...

jqueryhtmlajaxweb-servicescordova

What is the method for adjusting the position of this box-shadow?

As a beginner in coding, I stumbled upon this box shadow effect online but I am struggling to adjust it to match the font style I am using. Here is the CSS for the title: .sidebar-title { position:absolute; z-index:150; top:100px; left:330px; ...

htmlcssbox-shadow

The flex-basis property seems to be malfunctioning as the image suddenly vanishes when

While my question may seem similar to others, the issue at hand is actually quite different. Here's how it appears in Chrome https://i.sstatic.net/tngvr.jpg Safari https://i.sstatic.net/eE74k.png In Safari, you'll notice that the map disappear ...

htmlcsssafariflexbox

Display the title of an image beneath the image using CSS

Since upgrading my CMS, I've encountered an issue where the captions of images are not showing below the image for thousands of articles. For example: <img src="123.jpg" alt="Texttext" class="caption" style="disp ...

csstitlecaption

Using the responsive design mode may not accurately reflect the mobile user experience

Recently, I've been working on designing a new cover for my book using HTML and CSS. After completing the design, I previewed it in Responsive Design mode on both Firefox and Google Chrome. However, when I tried to view the website on my phone (a Gala ...

htmlcssresponsive-design

Enter text into a field on a different webpage and verify if the output matches the expected result

Possible Duplicate: Exploring ways to bypass the same-origin policy I'm facing a scenario where I have a form on my website that requires validation of a number. The validation process involves checking this number against another website where e ...

javascriptjqueryhtmlajax

What is the best technique to position a div at the bottom of a container that has a height of 100

After many attempts and searching for answers, I'm still struggling to figure out how to make the div float to the bottom with 100% height. I've even considered if it's an issue with Pure or something else entirely. It's definitely frus ...

htmlcssyui-pure-css