You can say that this is a duplication, but the other question + answers didn't work for me.

so. I am trying to blur the background where I want my text. So I setted a background image using css. And created a div that has a opacity of 0.1 and is blurred. Now I want to fill in contents in that dev (text). But that text is also blurred! How can I fix this?

I have searched a lot online on how to blur, and unblur etc. Nothing actually works for me.

<link rel="stylesheet" href="" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
@font-face {
    font-family: ProximaNova;
    src: url("ProximaNova-Regular.otf") format("opentype");

@font-face {
    font-family: ProximaNova;
    font-weight: bold;
    src: url("ProximaNova-Bold.otf") format("opentype");
body {
  background-image: url("bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
.aaa {
    top: 50%;
    left: 50%;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
    opacity: 0.1;
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -ms-filter: blur(4px);
    -o-filter: blur(4px);
    filter: blur(4px);
.b {
    background-image: url(bg.png);
<div class="aaa"><p>Hey, I want this text to NOT be blurred...</p></div>

Here is a codepen:

There is actually text in there, you can see it when you hover over with your mouse. Thanks for helping me!

0 Answers