Gradient border not working (Multiple borders)

[softmarshmallow]

Source of design

The Invalid output

.out{
    width: 961px;
    height: 474px;
    min-height: 100vh;
    overflow: hidden;
    background-color: rgba(104, 104, 104, 0.12);
    border: solid 2px undefined;
    border-radius: 11px;
    position: relative;
    backdrop-filter: blur(32px);
}

Which should be done like below.

  /* border styles */
  ::before {
    pointer-events: none;
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 1px;
    background: linear-gradient(135deg, var(--g-1), var(--g-2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }