CSS clip-path 생성기
CSS clip-path를 시각적으로 편집해 이미지·요소를 다양한 모양으로 잘라내세요. polygon은 vertex를 드래그할 수 있고, 원·타원·inset도 슬라이더로 즉시 조절됩니다.
사용 방법
polygon(다각형) · circle(원) · ellipse(타원) · inset(여백 사각형) 4가지 모드를 탭으로 전환하세요.
polygon은 SVG 캔버스의 점을 드래그하거나 점 개수를 변경할 수 있습니다. 원·타원·inset은 입력란이나 슬라이더로 값을 조절합니다.
실시간 미리보기로 결과를 확인하고 "복사" 버튼으로 CSS 코드를 한 번에 복사. 프리셋 버튼으로 삼각형·별·말풍선 같은 흔한 모양을 즉시 적용할 수 있습니다.
자주 묻는 질문
clip-path가 무엇인가요?
CSS의 `clip-path` 속성은 요소(이미지·div)를 임의의 모양으로 잘라내는 기능입니다. 이미지를 원형·다각형·말풍선 모양으로 보이게 만들 수 있고, 잘려나간 부분은 클릭·hover 영향도 받지 않습니다.
브라우저 지원은?
polygon·circle·ellipse·inset은 모든 모던 브라우저(Chrome 55+, Safari 9.1+, Firefox 54+, Edge 79+)에서 지원됩니다. SVG `<clipPath>` 참조는 더 오래전부터 가능했지만 본 도구는 인라인 CSS 형태만 출력합니다.
polygon과 path의 차이는?
polygon은 점들을 직선으로 연결한 다각형. CSS Shapes 2 명세에는 path() 함수도 있어 베지어 곡선 등 임의 모양이 가능하지만 브라우저 지원이 제한적입니다. 본 도구는 polygon만 지원합니다.
clip-path와 mask 차이는?
clip-path는 픽셀 단위로 보일/안 보일 "잘라내기"이고, mask는 알파(반투명) 그라데이션도 가능한 "가리기"입니다. 단순 모양 자르기는 clip-path가 가볍고 빠릅니다.
데이터가 서버에 전송되나요?
아닙니다. 모든 편집·미리보기는 브라우저에서만 이루어지며, 입력값이 외부로 전송되지 않습니다.
