android blur

home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Login
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div id="container">
    <ion-card>
      <ion-card-content>
        <ion-item>
          <ion-label>Email</ion-label>
          <ion-input type="email" name="email" placeholder="Insira seu email"></ion-input>
        </ion-item>
        <ion-button>Entrar</ion-button>
      </ion-card-content>
    </ion-card>
  </div>
  <div class="background">
    <div class="blur"></div>
  </div>
</ion-content>

home.page.scss

#container {
  z-index: 10;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;

  color: #8c8c8c;

  margin: 0;
}

#container a {
  text-decoration: none;
}

.background {
  position: relative !important;
  background-image: url("../../assets/img/bg.jpg") !important;
  background-position: bottom !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  height: 100vh !important;
  width: 100% !important;
}

.blur {
  background: rgb(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(5px) !important;
  filter: blur(5px) !important;
  height: 100% !important;
}