Need help for making not blur text css

Question

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">
  <a href="https://stackoverflow.com" id="something">Home</a>
</div>

perhaps removing `filter: blur(1px);` rule ! Your question is not that clear, can you explain more or at least show us what have you done so far. — ThS, Sep 09 '22 at 23:03
Try keeping your background elements and the content as separate elements. So `
... Home` — Rogue, Sep 09 '22 at 23:15
The constraints given by OP (`HTML` must not change) makes the duplicate tag invalid. — Andy Hoffman, Sep 09 '22 at 23:35
@AndyHoffman The answer which uses `::before` on the duplicate does *exactly* the same as your answer. The HTML makes no difference. — Heretic Monkey, Sep 09 '22 at 23:43

Andy Hoffman · Answer 1 · 2022-09-09T23:32:47.770

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">
  <a href="https://stackoverflow.com" id="something">Home</a>
</div>

Should better use a `position:relative` on the `.background` class and `position:absolute` on the `:before` to constrain the image inside it. — Gabriele Petrioli, Sep 09 '22 at 23:21

score 0 · Answer 2 · answered Sep 09 '22 at 23:24

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">
  <a href="https://stackoverflow.com" id="something">Home</a>
</div>

Need help for making not blur text css

2 Answers2