Componente com Blur

statistics.vue

<template>
  <div class="statistics">
    <div class="item">
      <h3>50+</h3>
      <p>Desenvolvedores</p>
    </div>
    <div class="item">
      <h3>200+</h3>
      <p>Clientes</p>
    </div>
    <div class="item">
      <h3>30+</h3>
      <p>Projetos Entregues</p>
    </div>
    <div class="item">
      <h3>4k</h3>
      <p>Seguidores nas redes sociais</p>
    </div>
  </div>
</template>

<style>
  .statistics {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    min-width: 679px;
    width: 85vw;
    max-width: 1300px;
    box-shadow: 0px 0px 36px 4px rgba(255, 255, 255, 0.15);
    padding: 15px 10px;
    min-height: 160px;
    border-radius: 17px;
    backdrop-filter: blur(3px);
  }

  .statistics .item {
    cursor: pointer;
    text-align: center;
  }

  .statistics h3 {
    font-weight: bold;
    margin-top: 20px;
    font-size: 42px;
    color: var(--red);
    text-shadow: 0px 0px 17px rgba(255, 255, 255, 0.16);
    transition: all .2s ease-in;
  }

  .statistics h3:hover {
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.46);
  }

  .statistics p {
    max-width: 140px;
  }
</style>