노이즈 그라데이션 보더

<div class="ngb" id="ngb">
  <div class="noise"></div>
  <div class="inner"><strong>Limited run</strong><span>noise + gradient edge</span></div>
</div>

.ngb{--a:0deg;position:relative;overflow:hidden;width:min(240px,80%);border-radius:16px;padding:2px;
  background:conic-gradient(from var(--a),var(--accent),var(--accent-2),var(--accent-3),var(--accent))}
.noise{position:absolute;inset:0;opacity:.45;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.inner{position:relative;border-radius:14px;background:var(--surface);padding:26px 22px;display:grid;gap:5px;text-align:center}
.inner strong{color:var(--fg);font-size:16px}
.inner span{color:var(--muted);font-size:12px}

const el = document.getElementById('ngb');
let a = 0;
(function loop(){ a = (a + 1.2) % 360; el.style.setProperty('--a', a + 'deg'); requestAnimationFrame(loop); })();