CSS Border Gradient 생성기
CSS 테두리 그라디언트 코드를 실시간으로 생성하세요.
135°
0%
100%
미리보기
CSS 코드
.element {
background:
linear-gradient(#1a1a2e, #1a1a2e) padding-box,
linear-gradient(135deg, #6366f1 0%, #ec4899 100%) border-box;
border: 3px solid transparent;
border-radius: 12px;
}CSS Border Gradient란?
CSS의 border-color는 단색만 지원하기 때문에 그라디언트 테두리를 만들려면 background-clip 트릭을 사용해야 합니다. padding-box와 border-box에 각각 배경을 겹쳐 적용하는 방식입니다.
그라디언트 타입
Linear Gradient (선형)
지정된 각도로 색상이 직선으로 전환됩니다. 위→아래, 대각선 등 방향감 있는 테두리 효과에 적합합니다.
Conic Gradient (원뿔형)
중심점을 기준으로 색상이 회전하며 전환됩니다. 테두리에 적용하면 무지개처럼 전체 테두리를 색상이 순환하는 효과를 만들 수 있습니다.
사용 방법
그라디언트 타입(Linear 또는 Conic)을 선택하고, 각도와 색상 포인트를 설정한 뒤 테두리 두께와 radius를 조절하세요. 생성된 CSS 코드를 복사해 바로 사용할 수 있습니다.
자주 묻는 질문
border-color에 그라디언트를 바로 적용할 수 없나요?
CSS의 border-color는 단색만 지원합니다. 이 도구는 background-clip 트릭을 사용해 JavaScript 없이 그라디언트 테두리를 만듭니다.
linear와 conic 그라디언트 테두리의 차이는 무엇인가요?
linear는 한 방향(예: 위→아래)으로 색상이 흐릅니다. conic은 요소를 빙 돌며 색상이 순환하므로 테두리 전체에 모든 색상이 고르게 표현됩니다.
모든 브라우저에서 지원되나요?
background-clip 방식은 Chrome, Firefox, Safari, Edge 최신 버전에서 지원됩니다. Internet Explorer는 지원하지 않습니다.
Tailwind CSS에서 그라디언트 테두리를 사용하려면?
Tailwind 기본 유틸리티로는 직접 지원되지 않습니다. 생성된 CSS를 @layer utilities에 추가하거나 인라인 스타일로 적용하세요.
conic gradient 테두리란 무엇인가요?
원뿔형 그라디언트를 테두리에 적용한 스타일로, 무지개 테두리나 회전하는 듯한 효과를 줄 수 있습니다.
애니메이션 그라디언트 테두리는 어떻게 만드나요?
@keyframes와 CSS 변수를 활용해 conic-gradient의 각도를 애니메이션으로 처리하면 회전하는 그라디언트 테두리를 만들 수 있습니다.