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;
  }