Прозрачность и размытость блока - CSS

Нужный вам эффект даст свойство backdrop-filter. Но, к сожалению, сейчас оно поддерживается только в Safari и iOS Safari (и в Chrome-based браузерах под флагом).

Тем не менее - с ним вы добьетесь желаемого:

.wrapper { 
  position: relative; 
} 
.cover { 
  -webkit-backdrop-filter: blur(5px); 
  backdrop-filter: blur(5px); 
  background: rgba(84, 77, 126, 0.75); 
  height: 100%; 
  left: 0; 
  position: absolute; 
  top: 0; 
  width: 300px; 
}

<div class="wrapper"> 
  <img src="https://i.stack.imgur.com/gdln9.png" alt=""> 
  <div class="cover"></div> 
</div>

Cмотреть код на jsfiddle.

Добрый день

Дело в том, что в CSS нельзя сделать размытость так, как бы это можно было бы видеть через "мутное" стекло. В цсс размытость задается именно тому блоку, который должен быть размыт.

В случае с панелью уведомления, как на вашем скрине - так сделать практически не реально. Потому что в этом случае кажется, что размытие придает именно панель нотификаций, но в цсс размытие должно быть только у блока.

"Но как сделать так, чтобы блок был и прозрачным (на 0.5 допустим) и размытым (не больше 5рх) и был цвет в качестве его фона."

Т.к. размытым должен быть именно блок конкретный - то это делается примерно так: { filter: blur(2px); background: rgba(174, 0, 255, 0.47); }

Результат: https://scrn.alximicus.com/c5b0SuOrATGFzMfLRaSNgePeU8s.png

Блок будет полупрозрачным и размытым.