Дело в том, что в CSS нельзя сделать размытость так, как бы это можно было бы видеть через "мутное" стекло.
В цсс размытость задается именно тому блоку, который должен быть размыт.
В случае с панелью уведомления, как на вашем скрине - так сделать практически не реально. Потому что в этом случае кажется, что размытие придает именно панель нотификаций, но в цсс размытие должно быть только у блока.
"Но как сделать так, чтобы блок был и прозрачным (на 0.5 допустим) и размытым (не больше 5рх) и был цвет в качестве его фона."
Т.к. размытым должен быть именно блок конкретный - то это делается примерно так:
{
filter: blur(2px);
background: rgba(174, 0, 255, 0.47);
}
Блок будет полупрозрачным и размытым.
