.gradient-border-box {
    position: relative;
    box-shadow: 0px 2px 5px rgba(31, 31, 41, 0.04), 0px 5px 20px rgba(31, 31, 41, 0.04);
    z-index: 0;
  }
  
  .gradient-border-box::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    z-index: -1;
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
  }

  .gradient-border-white {
    background: rgba(255, 255, 255, 0.4);
  }
  
  .gradient-border-white::after {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0));
      -webkit-mask-composite: destination-out;
      mask-composite: exclude;
  }

  .gradient-border-blue {
    background: linear-gradient(180deg, #F0F3FA 0%, #E1E7F4 100%);
  }

  .gradient-border-blue::after {
    background: linear-gradient(180deg, rgba(205, 214, 234, 0) 0%, rgba(205, 214, 234, 100%));
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
  }

  .gradient-border-red {
    background: yellow;
  }

  .gradient-border-red::after {
    background: red;
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
  }