그라데이션 보더

Gradient border

테두리 선 자체에 그라데이션을 넣는 기법. border-color 는 단색만 가능해 배경 트릭이 필요합니다.

다른 이름: Rainbow borderborder-image gradient

···

html

<div class="card" id="gb"><strong>Featured</strong><span>Gradient border</span></div>

css

.card{--a:0deg;position:relative;width:min(240px,78%);padding:26px 22px;border-radius:18px;text-align:center;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
    conic-gradient(from var(--a),var(--accent),var(--accent-2),var(--accent-3),var(--accent)) border-box;
  border:3px solid transparent;color:var(--fg);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.card strong{display:block;font-size:18px;margin-bottom:4px}
.card span{color:var(--muted);font-size:13px}

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

border-image: linear-gradient(...) 1 을 쓰거나, 배경을 두 겹(padding-box 는 실제 배경색, border-box 는 그라데이션) 겹쳐 border 두께만큼만 그라데이션이 보이게 하는 "이중 배경" 기법을 씁니다. 후자가 border-radius 와 함께 잘 동작해 더 널리 쓰입니다.

그라데이션의 각도를 JS 로 계속 돌리면 테두리를 빛이 훑고 지나가는 듯한 애니메이션 보더가 됩니다.

언제 쓰나

강조 카드, "추천" 배지, 활성 탭 표시에 씁니다. 한 화면에 여러 개 쓰면 위계가 사라지니 절제해서 쓰세요.