Need help for making not blur text css [duplicate] - html

Question

This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 5 months ago.
Is there any possible way to make text not blur (not changing the html code)
I want to make only background blurry and text not blurry.
My code looks like this
.background {
height: 400px;
background-image: url(photo);
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
filter: blur(1px);
}
<div class="background">
Home
</div>

Answer 1

I moved the background image to an absolutely positioned pseudo element and gave it a negative z-index. I set the inset to 0 as a shorthand to cover the entire parent's dimensions. This allows the text to still be visible but not be part of the blur effect.
.background {
height: 400px;
position: relative;
}
.background:before {
content: '';
position: absolute;
inset: 0;
background-image: url("https://images.unsplash.com/photo-1659536002780-73275f63f11c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=900&q=60");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
filter: blur(2px);
z-index: -1;
}
#something {
color: white;
font-size: 2rem;
}
html, body {
margin: 0;
}
<div class="background">
Home
</div>

Answer 2

This is an approach to follow, especially if you don't want to change the html code as it is (code: https://jsfiddle.net/)
.background {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 5px;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
max-width: 50%;
max-height: 50%;
padding: 20px 40px;
}
html,
body {
height: 100%;
width: 100%;
}
body {
background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
<div class="background">
Home
</div>