CSS 애니메이션 그라데이션 테두리 생성기

회전하는 무지개 테두리는 직접 CSS로 만들려고 시도하기 전까지는 단순해 보입니다. 일반 사용자 지정 속성만 가지고 conic-gradient() 안의 각도를 움직이려 하면 소용이 없습니다. 브라우저가 그 값이 각도라는 사실을 알지 못해 0deg와 360deg 사이를 보간하지 못하고 그냥 뛰어넘어 버리기 때문입니다. 이 생성기는 진짜 해결책인 CSS Properties and Values API를 사용합니다. `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` 코드가 브라우저에게 사용자 지정 속성이 어떤 종류의 값을 담고 있는지 정확히 알려주므로, @keyframes 규칙에 따라 GPU에서 부드럽게 보간되는 동작이 가능해집니다.

링 자체는 ::before 가상 요소를 박스보다 크게(테두리 두께만큼 안쪽으로 오프셋) 만들고 배경을 `conic-gradient(from var(--border-angle), ...)`로 설정한 것입니다. 처음 색상으로 다시 돌아오도록 하면 이음새가 보이지 않습니다. 그 다음에는 마스크가 실제 형태를 다듬습니다. `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` 코드가 패딩 박스와 콘텐츠 박스 사이의 링 모양 차이만 남기고 나머지 영역의 단색 그라데이션 사각형은 모두 버립니다. Safari의 구버전 `-webkit-mask-composite: xor`도 동일한 연산을 수행하며 표준 속성과 함께 제공되므로, 특정 엔진에서 조용히 실패하지 않고 효과가 일관성 있게 렌더링됩니다.

border-radius 지원은 겉모양만 덧붙인 사후 대책이 아닙니다. 가상 요소의 `border-radius: inherit` 설정 덕분에 박스에 몇 px의 둥글기를 지정하든 그 값이 링으로 그대로 전달됩니다. 덕분에 알약 모양 버튼이나 둥근 카드에는 둥글게 빛나는 테두리가 생기고, 굽은 모서리 바깥으로 직선 모서리가 삐져나오지 않습니다. 실제로 확인해보세요. 반지름 슬라이더를 뾰족한 직사각형에서 완전한 알약 모양까지 움직여보면, 링이 모든 단계에서 형태를 따라가는 것을 볼 수 있습니다. 바로 이 디테일이 가짜 스크린샷과 실제 구현 기술을 가르는 지점입니다.

페이지의 나머지 모든 요소들은 생성되는 코드에 직접 대응됩니다. 두께 슬라이더는 링의 굵기이자 가상 요소의 inset/패딩 값이고, 회전 속도 슬라이더는 @keyframes의 animation-duration이며, 방향 스위치는 키프레임 끝 각도의 부호(+360deg 또는 -360deg)를 뒤집는 것입니다. 각 색상 정지점은 conic-gradient() 호출 안에서 콤마로 구분된 항목 하나하나입니다. 이 모든 것이 이미지도, 자바스크립트 구동 애니메이션 루프도, 외부 서비스도 없이 여러분의 브라우저 안에서 동작합니다. CSS 블록을 복사해 붙여넣으면 어디서든 계속 회전합니다.