как заблюрить фон css

Всем привет. Недавно понял как менять картинку на фоне при наведении на кнопку. Теперь хочу спросить, возможно ли эту картинку таким же способом заблюрить, или затемнить(именно background, не весь body). Без javascript

style.css

body{
    background-image: url('https://i.pinimg.com/originals/a6/ac/92/a6ac9244c02998a5dcce22c324d8d8a4.gif'), url('https://i.pinimg.com/originals/77/4e/bd/774ebd39cf6673fa02200f53f19d2d2c.gif');
    background-size: 100%;
    font-family: "Comfortaa", sans-serif;
    transition: 1s;
}

.joinbtn {
    border: 5px solid;
    border-color: whitesmoke;
    text-decoration: none;
    border-radius: 10px;
    color: whitesmoke;
    padding: 50px 100px;
    font-size: 50px;
    transition: 1s;
    background-image: url('https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExZGR6b3NzdG1ocHEyaGNiZjgxdGs2ZmhwMDR0M2ZleXJsMDE3djFsZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/KcnbWfsuFr7JpgowGT/giphy.gif');
}

.joinbtn:hover{
    color: rgb(66, 164, 225);
    box-shadow: 0 0 50px 10px #fff;
    transition: 1s;
}

body:has(.joinbtn:hover){
    background-image: url('https://i.pinimg.com/originals/77/4e/bd/774ebd39cf6673fa02200f53f19d2d2c.gif');
    transition: 1s;
}

index.html

{% include 'header.html' %}
{% include 'base.html' %}
<div class="center container text-center col-md-8 offset-md-2">
    <a class="joinbtn" href="https://discord.gg/MZPbNGQ8">Join DEPO</a>
</div>