CSS模糊效果

Question

我正在尝试使用cssn实现这一点（忽略白色的选择器框）

基本上，我的html类似于以下内容：

<div class="container>
   <div class="card">
      <h1> Blog </h1>
      <p> Quack </p>
   </div>
</div>

现在我的css

.container {
   background-image: // the image
   display: flex;
   justify-content: center;
   align-items: center;
}

.card {
    height 200px;
    width: 300px;
    background-color: rgba(213, 231, 230, 0.51);
} 

现在，此CSS将在图像顶部放置透明的绿卡。但是，我不只是希望它是透明的绿色。我希望它具有“模糊”效果。

我该怎么做？