CSS - Issue with a blurred div nested inside another blurred div

I'm facing an issue where I can't have a blurred element inside another blurred element. Currently, I have a header with backdrop-filter: blur(3px); and a div within it with a more intense background blur of backdrop-filter: blur(50px);. However, both elements end up being blurred by just 3px. I want to maintain this structure while achieving the desired effect. Can someone guide me on how to achieve this?

https://jsfiddle.net/q1aymg02/42/

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8>
  <title></title>
</head>
<body>

<style>
 body {
    background-image: url(https://image.freepik.com/free-vector/space-game-background-with-landscape-planet_107791-1700.jpg);
   }

.header {
  backdrop-filter: blur(3px);
  padding: 15px;
  border: 1px solid #FFF;
}

.header ul a li {
  display: inline-block;
  padding: 15px 40px;
  background: #ffffffb5;
  backdrop-filter: blur(50px);
}
</style>

<div class="header>
  <ul>
    <a href=""><li>Dont Blured</li></a>
    <a href=""><li>By 50px</li></a>
    <a href=""><li>Only 3px</li></a>
  </div>
</body>
</html>

javascripthtmlcss

Answer №1

The CSS backdrop-filter property allows you to add filter effects to elements, and this effect will be inherited by its child elements. It's definitely worth exploring.

 body {
    background-image: url(https://image.freepik.com/free-vector/space-game-background-with-landscape-planet_107791-1700.jpg);
   }

.header {
  
  backdrop-filter: blur(3px);
  padding: 15px;
  border: 1px solid #FFF;
}

.header ul a li {
  display: inline-block;
  padding: 15px 40px;
  background: #ffffffb5;
  backdrop-filter: blur(50px);
}

.header ul a li::before {
   content: "";
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   backdrop-filter: blur(50px);
}

.header ul a li.blured::before {
  content: "Don't Blur";
}

.header ul a li.by--50px::before {
  content: "By 50px";
}

.header ul a li.only--3px::before {
  content: "Only 3px";
}
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<div class="header">
  <ul>
    <a href=""><li class="blured">Don't Blur</li></a>
    <a href=""><li class="by--50px">By 50px</li></a>
    <a href=""><li class="only--3px">Only 3px</li></a>
  </ul>
</div>
</body>
</html>

Answer №2

Uncertain if this is the exact solution you seek, but here's a technique to blur the li elements:

.header ul a li {
  filter: blur(1px);
  display: inline-block;
  padding: 15px 40px;
  background: #ffffffb5;
}

This blurring effect will encompass all elements within, including the text content.

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

Choosing only those elements that are not children of parents with a specific class by utilizing the `.not()` method

I am attempting to target all elements having the class .select that are nested somewhere within the DOM tree. The only condition is that these elements should not have any ancestors with the class .forbidden. This means it will not detect any elements ...

javascriptjqueryhtmldomdom-traversal

Utilize JavaScript to encapsulate specific data into a JSON array

I need help converting a string value into JSON format: hello|world|this|is|javascript || my|name|is|mahdi My current code successfully splits the string using ||, but I am unable to group the split values into separate arrays in the JSON output. Here is ...

javascriptarraysjson

Ensure password confirmation is correct

Currently, I'm utilizing Yup for form validation. You can check it out here: https://www.npmjs.com/package/yup. Additionally, I came across this package called yup-password which seemed helpful for validating my Formik forms. Here's the link to i ...

javascriptnode.jsnpmformikyup

What advantages does using a callback offer compared to await?

For a project focused on user-related tasks, I crafted the following code snippet within my service file. let result: User | null = await userModel.registerUser(); return result; After receiving feedback from my team advising to "Use callback rather than ...

javascripttypescriptasync-awaitcallback

Shifting an image within a div using HTML5 and CSS3

I am wondering how to position the image 50px from the top and 50px from the left within the div. Should I use padding for this? <header> <img src="logo.png" alt="" /> </header> header { width... height: background: (url) } ...

htmlcss

Utilizing React Hooks to insert components into a div

I am in the process of creating a todo list using React and realized that states are used in React instead of innerHTML or appendChild() in JavaScript. My challenge lies here: When a user clicks on a button, a simple todo should be added to the parent div ...

javascriptreactjsreact-hooks

"Having issues with Django not properly applying the JavaScript and CSS files I've linked in

I have completed my project and organized all the necessary files, including index.html, css, js, and settings.py within the appropriate folders. I am encountering an issue with applying a pen from the following source: CodePen index.html <!DOCTYPE h ...

javascriptpythonhtmlcssdjango

angularjs dropdown - customize selected item appearance

My dilemma involves a list of countries, each with a code and name. When the list is expanded, I aim to show "code + name" (e.g. "+44 United Kingdom"). However, once a country is selected, I only want to display the code ("+44"). Is it achievable using Ang ...

javascriptangularjshtml

The basic spinning hover animation is not functioning properly

Can anyone help me with creating a hover effect on an inner circle that causes two outer rings to rotate? I've been struggling to make it work as expected. When I hover over the inner circle, the outer rings only move to the bottom right corner withou ...

csscss-transforms

Is there a way to verify duplicate email addresses without the need to click any button?

As I work on developing a web application, I am faced with the challenge of checking for duplicate email addresses in real-time without the need to press a button. This check must be done by comparing the data with information stored in the database. Since ...

javascriptc#asp.net

Issues with Input-group-Addon functionality in Bootstrap 4

During my current JavaScript course project using Bootstrap 4, I encountered an issue with the input-group-addon class on a span element. The icon is not displaying as shown in the tutorial. <!doctype html> <html lang="en"> <head&g ...

htmlbootstrap-4

When I view my PHP file with embedded HTML elements in Laravel on the XAMPP Apache server, the display is not rendering correctly

I've been attempting to translate my HTML project into a PHP format while delving into the world of Laravel. However, after integrating codes from my old HTML files into my new PHP files in Laravel and running them on the XAMPP Apache server, I am onl ...

phphtmlcsslaravelxampp

An error popped up while using the fetch API due to an unexpected end of input

fetch('http://www.freegamesforyourwebsite.com/feeds/games/?tag=platform&limit=100&format=json', { method:'GET', mode:'no-cors', dataType: 'json', headers: { 'Accept': 'a ...

javascriptjsonfetch-api

Unable to retrieve data from object properties despite their visibility

I am encountering issues accessing object properties, as they keep returning as undefined. I have attempted console.log(JSON.parse(this.$store.state.user.userId)); as well as console.log(JSON.parse(this.$store.state.user[0].userId)); However, when I ...

javascriptvue.js

Controller method remains inaccessible despite multiple attempts with Javascript ajax Get call

I've tried numerous solutions for this issue, but I'm still unable to make it work. My goal is to invoke a controller method that accepts a parameter and returns a string based on that parameter. Despite using an ajax GET request, the outcome is ...

javascriptc#asp.netcontroller

Tips for making your textbox more interactive

Having trouble with my suggestion box display in jQuery. When I add more textboxes, an error from autocomplete.php shows up. I'm new to scripts and need some guidance. Here is the HTML and JS for the suggestion box: < script type = "text/javascri ...

javascriptphpjqueryhtmlajax

Looking for a way to easily swipe through videos?

My mobile phone viewport displays a series of pictures and videos, with the swipeleft/right function enabled for browsing. However, I noticed that while the swipe feature works fine for images, it stops functioning when a video is displayed. Can anyone p ...

javascriptjqueryjquery-mobile

The Mongoose model is having issues being imported into a different Component

Attempting to utilize my model for displaying and locating users in MongoDB has hit a snag. Upon importing it into profile.js and launching my app, an error is thrown: Cannot read properties of undefined (reading 'Users') https://i.stack.imgur.c ...

javascriptreactjsmongodbmongoosenext.js

Is there a way to deactivate all dot inputs on number type input in vue.js 2?

Here is an example of my HTML code: <div id="app"> <input type="number" v-model="quantity"/> </div> This is how my Vue component looks: new Vue({ el: '#app', data: { quantity: '' }, watch: { quanti ...

javascriptvue.jsvuejs2vue-component

Running Intel XDK on my Windows 8 64-bit system - A step-by-step guide

Every time I try to open this app, it gets stuck on the "initializing" screen and nothing happens. I've tried uninstalling and reinstalling the latest version multiple times but the problem persists. I even tried downloading compatible node-webkit fil ...

androidhtmlcross-platformmobile-websiteintel-xdk