Есть ли способ объединить фоновый фильтр и размытие слоя? ⇐ CSS

[Anonymous]

Мне нужно что-то вроде этого.
На заднем плане есть элемент div, он размывает фон, используя размытие изображения, используя размытие фонового фильтра.
Но я также хочу, чтобы элемент div тоже имел размытие слоя, чтобы он выглядел так, как будто он затухает, а не внезапно заканчивается.
Обратите внимание: я знаю, что фильтр и фоновый фильтр этого не делают. хорошо работаем вместе, именно поэтому я ищу решение.
Я попробовал просто использовать фоновый фильтр, чтобы размыть фон, и применил линейный градиент, но это тоже не сработало.


Вот ссылка:
https://codepen.io/asaadmahmood/pen/KKObdgy

Footer



.background-container {
position: relative;
width: 500px;
height: 300px;
background-image: url('');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}

/* Overlay with backdrop and layer blur */
.overlay {
color: white;
position: absolute;
width: 100%;
height: 100px;
bottom: 0;
backdrop-filter: blur(10px); /* Background blur */
filter: blur(10px); /* Layer blur */
display: flex;
align-items: center;
justify-content: center;
}

/* Text styling */
.footer {
color: white;
font-size: 24px;
font-weight: bold;
position: absolute;
bottom: 0;
width: 100%;
left: 0;
text-align: center;
padding-bottom: 40px;
z-index: 5;
}


Подробнее здесь: https://stackoverflow.com/questions/791 ... r-together