Is there a way to blur the background but not the text in css?

Question

#baslik {
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: bold;

}


#musteri_yorumlari {
    color: rgb(255, 255, 255);
    text-align: center;
    position: relative;
    bottom: 50px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    font-size: 20px;
    font-weight: bold;
    filter: blur(10px);
    display: table;
    margin: 0 auto 0 auto;


}





#border {
    background-color: #5ab138;
    
    border-radius: 20px;
    border-style: outset;
    border-width: 5px;
    border-color: rgb(231, 231, 231);

    padding: 15px;
    text-shadow: #ff6a00;
    text-shadow: 2px 2px 3px #00000065;

}



#ozlusoz {
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    font-size: 20px;

    text-align: center;
    position: relative;
    top: -15px;
}










#tum_videolar {
    text-align: center;


}



#video__1 {


    display: inline-block;
    *display: inline;

}



#video__2 {


    display: inline-block;
    *display: inline;

}


#video__3 {



    display: inline-block;
    *display: inline;
}

#video__4 {



    display: inline-block;
    *display: inline;
}

#video__5 {



    display: inline-block;
    *display: inline;


}

#video__6 {



    display: inline-block;
    *display: inline;

}

#video__7 {



    display: inline-block;
    *display: inline;


}

#video__8 {



    display: inline-block;
    *display: inline;
}

#video__1,
#video__2,
#video__3,
#video__4,
#video__5,
#video__6,
#video__7,
#video__8 {
    border: ;
    border-width: ;
    border-radius: ;


}





body {
    background-color: #0d0d0d;
    position: relative;
    bottom: 40px;
    
}

#profilephoto {
    width: 8%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    bottom: 54px;

    border-radius: 50%;
    border: solid white;

    box-shadow: 0em 0em 30px rgb(255, 75, 75);




}

#Jason_P {
    color: rgb(46, 53, 255);
    text-shadow: none;
    font-size: 15px;
}

#Cory_Z {
    color: rgb(46, 53, 255);
    text-shadow: none;
    font-size: 15px;
}

#formore {
    color: rgb(255, 255, 255);
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    
    background-color:#51515180;
    border-radius: 10px;
    display: table;
    margin: 0 auto 0 auto;
    padding: 2px;
    

}

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="index.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mirza Sahin </title>
    

</head>

<body>
    
    <h1 id="baslik">Mirza Sahin</h1>
    <br>

    <img src="/Profile Photo.jpg" alt="Mirza Sahin" id="profilephoto">

    <br><br>


    <div id="musteri_yorumlari">
        <div id="border">
            <div id="yorum">"Mirza was amazing to work with. His attention to detail and skill level is the top 1% on
                Upwork.<br> Well done will def use again!"<br><span id="Jason_P">Jason P. / United States</span></div>
            <br>
            <div id="yorum">"Mirza is incredible with anything video. He takes my terrible videos, works his magic, and
                creates a masterpiece. <br>Would highly recommend!" <br><span id="Cory_Z">Cory Z. / Canada</span></div>
        </div>
    </div>




    <div id="tum_videolar">

        <div id="video__1">

            <iframe title="vimeo-player" src="https://player.vimeo.com/video/509719836?h=6ae2aadcb5" width="640"
                height="340" frameborder="0" allowfullscreen></iframe>

        </div>



        <div id="video__2">

            <iframe title="vimeo-player" src="https://player.vimeo.com/video/636505933?h=e048a335e6" width="640"
                height="340" frameborder="0" allowfullscreen>
            </iframe>

        </div>

        <br><br><br>


        <div id="video__3">

            <iframe title="vimeo-player" src="https://player.vimeo.com/video/645523495?h=c198f0dedd" width="640"
                height="340" frameborder="0" allowfullscreen>
            </iframe>

        </div>

        <div id="video__4">

            <iframe title="vimeo-player" src="https://player.vimeo.com/video/567036624?h=4ce12ce017" width="640"
                height="340" frameborder="0" allowfullscreen></iframe>

        </div>

        <br><br><br>


        <div id="video__5">

            <iframe title="vimeo-player" src="https://player.vimeo.com/video/714396313?h=28b0205e0f" width="640"
                height="340" frameborder="0" allowfullscreen></iframe>

        </div>

        <div id="video__6">
            <iframe title="vimeo-player" src="https://player.vimeo.com/video/714090413?h=0d265ce8f0" width="640"
                height="340" frameborder="0" allowfullscreen></iframe>

        </div>


        <br><br><br>

        <div id="video__7">
            <iframe title="vimeo-player" src="https://player.vimeo.com/video/626411112?h=faf989f7d4" width="640"
                height="340" frameborder="0" allowfullscreen></iframe>
        </div>

        <div id="video__8">
            <iframe title="vimeo-player" src="https://player.vimeo.com/video/695168003?h=1f4f9749bd" width="640"
                height="340" frameborder="0" allowfullscreen></iframe>

        </div>




    </div>
    <br>


    <h1 id="formore">
        <a href="https://vimeo.com/mirzasahin" id="clickhere" style="text-decoration: none; color: #5ab138;"
            target="_blank" alt="Vimeo Account">Click here</a> for more works
    </h1>

    

</body>

</html>

I want to give a blur effect to the green area in the background. But since the background is the background of a text, that is, a whole, when I want to blur the background, a blur effect is also added to texts. I don't want to add blur to text, just want to add background. Or is there a code to exclude texts with blur effect? Like ";none"

Code

score 1 · Answer 1 · answered Jul 18 '22 at 22:56

When you apply the blur on the parent element it will automatically be applied on the children. What you can do is separate the text and the background and apply the filter on the background element only. Here's a minimal working approach:

HTML

<div class="wrapper"> 
  <div class="text"> some text here </div>
  <div class="bg"> </div>
</div>

CSS



.wrapper{
  position:relative;
  display:grid;
  justify-items:center;
  align-items:center;

}
.text{
  color:black;
  position:absolute;
  z-index:1;
}
.bg {
  height: 5rem;
  width:10rem;
  background-color:red;
  filter: blur(5px);  
}

Also, an id in css should be unique, however in your case, you are using id="yorum" more than once. If you want to apply the same css in multiple places then you should use classes. Of course there's a lot more to it than that, which is beyond the scope of this answer. Refer to this article as a place to start and have a look at specificity in css.

Hey Mina, Thank you so much! I try it like your code, and it's working right now. I learned "Position: relative and absolute differences today. Now I can add a blur effect to my text's background. — Mirza, Jul 19 '22 at 19:38

Is there a way to blur the background but not the text in css?

1 Answers1