CSS 클립패스 생성기

이 도구는 원, 타원, 삼각형, 오각형, 육각형, 별, 둥근 사각형 같은 도형 프리셋에서 CSS clip-path 값을 생성하고, 복사하기 전에 미리보기 박스에서 잘린 도형을 실시간으로 보여줍니다. 흔히 쓰이는 도형이라면 polygon() 좌표를 직접 손으로 계산할 필요가 없습니다.

이 도구는 무엇인가요?

clip-path는 요소가 정의된 영역 바깥의 모든 부분을 숨기고 안쪽 도형만 보이게 만드는 CSS 속성입니다 — 요소의 박스 자체는 레이아웃상 그대로 존재하고 단지 그려지지 않을 뿐입니다. circle(), ellipse(), inset() 같은 기본 도형 함수를 받아들이며, 이 중 polygon()은 임의의 x/y 좌표 쌍 목록을 받아 직선으로 이뤄진 어떤 도형이든 정의할 수 있습니다.

polygon() 좌표는 손으로 쓰기 가장 어려운 부분입니다 — 오각형, 육각형, 별 모양은 각각 정밀하게 배치된 여러 개의 점이 필요하고, 하나라도 틀리면 도형 전체가 일그러집니다. 이 도구는 도형 프리셋에서 이 좌표들을 대신 계산해 미리보기를 즉시 업데이트하고, 그대로 복사할 수 있는 정확한 clip-path CSS를 제공합니다.

출처: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — clip-path와 기본 도형 함수를 정의하는 명세.

왜 사용해야 할까요?

실시간 미리보기가 실제 미리보기 박스를 선택한 도형으로 잘라 보여주므로 좌표만 보고 상상할 필요 없이 실제 결과를 확인할 수 있습니다.
원, 타원, 삼각형, 오각형, 육각형, 별, 둥근 사각형까지 일곱 가지 도형 프리셋이 polygon 좌표를 직접 쓰지 않고도 대부분의 clip-path 활용 사례를 커버합니다.
원, 타원, 둥근 사각형 프리셋에는 크기/둥글기 슬라이더가 있어 좌표를 편집하지 않고도 도형을 미세 조정할 수 있습니다.
표준 clip-path CSS를 출력해 어떤 요소에든 바로 붙여넣을 수 있습니다.
전적으로 브라우저 안에서 동작합니다 — 설정한 내용이 어디로도 업로드되지 않습니다. 무료, 가입 불필요, 모바일에서도 사용 가능.

사용 방법

드롭다운에서 도형을 고르세요 — 원, 타원, 삼각형, 오각형, 육각형, 별, 둥근 사각형.
원, 타원, 둥근 사각형 도형은 크기/둥글기 슬라이더로 클립을 미세 조정하세요.
도형이나 슬라이더를 바꿀 때마다 미리보기 박스가 실시간으로 업데이트되는지 확인하세요.
생성된 clip-path CSS를 복사해 자르고 싶은 요소에 붙여넣으세요.
단색 대신 이미지에 적용하려면 같은 clip-path 속성을 <img>나 background-image가 있는 요소에 적용하세요.

예시

입력

도형: 육각형

결과

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

배지 스타일의 프로필 사진이나 기능 아이콘에 자주 쓰이는 정육각형 클립입니다.

기본 도형 vs. polygon()

원, 타원, inset(둥근 사각형)은 자체적인 간단한 문법을 가진 CSS 내장 기본 도형 함수입니다 — 반지름 한두 개에 선택적으로 중심 위치나 모서리 둥글기를 더하는 정도입니다. 삼각형, 오각형, 육각형, 별은 내장 도형이 아니라 모두 polygon()으로, 도형의 윤곽을 따라가는 평면 x/y 좌표 목록으로 표현됩니다. 이 도구는 정다각형(간격이 균등한 도형)과 오각별의 좌표를 자동으로 계산해주는데, 이 부분이 손으로 정확히 맞추기 가장 번거로운 부분입니다.

자주 쓰이는 클립패스 패턴

원형 아바타나 배지: 중간 정도 반지름의 circle()을 정사각형 원본 이미지와 함께 써서 원이 타원으로 늘어나지 않게 합니다.
각진 섹션 구분선: (여기 프리셋에는 없는) 커스텀 polygon으로 전체 너비 섹션의 위나 아래 모서리를 비스듬히 만들어 사각형이 아닌 페이지 구분을 만듭니다.
별점 아이콘이나 배지 모양: 별 프리셋은 손으로 그린 SVG 대신 간단한 경우에 쓸 수 있는 장식용 도형으로 유용합니다.
육각형 사진 그리드: 육각형으로 잘린 이미지를 벌집 모양으로 배치하는, 포트폴리오나 팀 소개 페이지에서 흔한 패턴입니다.
border-radius의 가벼운 대안으로서의 둥근 사각형: 클립이 넘치는 자식 콘텐츠까지 잘라내야 할 때 유용합니다. border-radius만으로는 overflow: hidden을 추가하지 않는 한 자식 요소를 잘라내지 못하기 때문입니다.

다른 CSS 도구와 조합하기

clip-path는 클립되는 배경으로 CSS 그라디언트와 함께 자주 쓰이거나, 감싸는 요소에 적용한 box-shadow와 결합됩니다(clip-path는 요소 자신의 그림자도 함께 잘라내므로, 잘린 도형이면서도 떠 있는 것처럼 보여야 할 때는 부모 요소에 그림자를 주는 것이 일반적인 우회법입니다).

→ CSS 그라디언트 생성기 · Border Radius 생성기 · 박스 섀도우 생성기

자주 묻는 질문

clip-path가 요소의 레이아웃 크기에 영향을 주나요?

아니요 — 요소는 레이아웃 목적상 원래의 박스 크기와 위치를 그대로 유지하며, clip-path는 무엇이 그려지는지만 바꿉니다. 주변 요소는 클립이 적용되지 않은 것처럼 배치되므로, 잘린 도형이 크기가 조정된 요소처럼 동작하리라 기대하면 예상과 다를 수 있습니다.

잘린 도형에 box-shadow가 왜 안 보이나요?

clip-path는 요소가 그리는 그림자를 포함해 요소 전체 렌더링을 잘라내므로, 원이나 다각형으로 잘린 요소 자체의 box-shadow는 클립 경계에서 잘려 나갑니다. 보이는 도형을 따라가는 그림자를 원한다면, 클립되지 않은 감싸는 요소에 box-shadow를 적용하세요.

clip-path 도형에 애니메이션이나 전환 효과를 줄 수 있나요?

가능합니다, 다만 같은 타입이고 점의 개수가 같은 두 clip-path 값 사이에서만 됩니다 — 예를 들어 점 6개짜리 polygon()에서 점 6개짜리 다른 polygon()으로 전환하는 식입니다. 근본적으로 다른 도형 사이(circle()에서 polygon()으로 등) 전환은 대체로 여러 브라우저에서 매끄럽게 애니메이션되지 않습니다.

clip-path를 요소 콘텐츠뿐 아니라 배경 이미지에만 쓸 수 있나요?

clip-path는 배경 이미지만이 아니라 background-color, 테두리, 콘텐츠를 포함한 요소 전체를 함께 잘라냅니다. 배경 이미지만 잘라내고 나머지 콘텐츠는 그대로 두고 싶다면, 배경만 담고 있는 별도의 요소에 clip-path를 적용하세요.

clip-path는 모든 최신 브라우저에서 지원되나요?

네 — MDN의 호환성 데이터에 따르면 기본 도형 함수(circle, ellipse, inset, polygon)를 사용하는 clip-path는 2020년 1월부터 주요 브라우저에서 Baseline widely available 상태입니다. 현재 브라우저 버전에서는 별도의 대체 처리 없이 프로덕션에서 안전하게 사용할 수 있습니다.