CSS 클립패스 생성기
무료 온라인 CSS clip-path 생성기. polygon, circle, ellipse, inset 모양을 드래그 가능한 점으로 디자인하고, 실시간 미리보기와 클릭 한 번으로 CSS 코드를 복사하세요.
CSS clip-path란 무엇인가요?
clip-path는 요소를 기본 도형이나 경로로 잘라내는 CSS 속성입니다. 도형 밖의 부분은 숨겨지므로, 이미지를 편집하지 않고도 사각형 이미지나 박스를 삼각형, 원, 육각형, 기울어진 배너 또는 원하는 다각형으로 바꿀 수 있습니다.
어떤 브라우저가 clip-path를 지원하나요?
이 생성기가 사용하는 기본 도형 함수 polygon(), circle(), ellipse(), inset()는 Chrome, Edge, Firefox, Safari, Opera 등 모든 최신 브라우저에서 지원됩니다. -webkit-clip-path 접두사는 아주 오래된 모바일 Safari에서만 필요합니다.
polygon 모드는 어떻게 사용하나요?
polygon 모드에서는 미리보기의 각 꼭짓점이 드래그 가능한 점으로 표시됩니다. 점을 드래그해 이동하고, 빈 공간을 더블클릭하면 새 점이 추가되며, 점을 클릭해 선택한 뒤 삭제 버튼으로 제거할 수 있습니다. CSS 값은 백분율 좌표로 실시간 갱신됩니다.
polygon()의 백분율은 무엇을 의미하나요?
각 꼭짓점은 요소 왼쪽 상단을 기준으로 한 X Y 백분율 쌍으로 표기됩니다. 값이 요소 크기에 상대적이므로 도형이 요소와 함께 확대·축소되며 어떤 화면 폭에서도 반응형으로 유지됩니다.
circle, ellipse, inset의 차이는 무엇인가요?
circle(반지름 at x y)은 하나의 반지름을 가진 원으로, ellipse(rx ry at x y)는 가로·세로 반지름이 다른 타원으로, inset(위 오른쪽 아래 왼쪽)은 각 변에서 안쪽으로 줄어든 사각형으로 잘라냅니다. 이 도구는 모든 매개변수에 슬라이더와 숫자 입력을 제공합니다.
clip-path는 레이아웃이나 클릭에 영향을 주나요?
clip-path는 순수하게 시각적입니다. 요소는 레이아웃에서 원래 박스를 유지하므로 주변이 움직이지 않습니다. 다만 클릭 같은 포인터 이벤트는 잘린 가시 영역 안에서만 반응하므로, 이를 활용해 커스텀 모양 버튼을 만들 수 있습니다.
clip-path를 애니메이션할 수 있나요?
네. 도형 함수와 점 개수가 일치하면 브라우저가 두 clip-path 값을 부드럽게 전환합니다. 예를 들어 큰 inset에서 작은 inset으로, 또는 같은 꼭짓점 수의 polygon 간 변형이 가능합니다. CSS transition 속성으로 애니메이션하세요.
이미지나 데이터가 업로드되나요?
아니요. 미리보기 이미지는 캔버스에 로컬로 그린 그라디언트이며 모든 계산은 브라우저에서 이루어집니다. 만든 결과물은 서버로 전송되지 않으며, 로드 후에는 오프라인에서도 사용할 수 있습니다.
clip-path의 대표적인 활용 예는 무엇인가요?
대각선 히어로 섹션, 육각형·원형 아바타 마스크, 삼각형 말풍선 포인터, 창의적인 포토 콜라주, 카드의 모서리 컷팅, 개성적인 모양의 버튼 등 이미지 편집 프로그램 없이 다양하게 활용됩니다.
CSS 클립패스 생성기 사용 방법
이미지를 편집할 필요 없이 CSS clip-path로 요소에 원하는 모양을 입히세요. 도형 함수를 고르고 핸들을 끌어서, 바로 쓸 수 있는 CSS를 복사하세요. 모두 브라우저에서 로컬로 동작합니다.
- 모드를 고르세요: 다각형(Polygon), 원(Circle), 타원(Ellipse), 안쪽 여백(Inset).
- 다각형 모드에서는 꼭짓점 점을 끌고, 빈 공간을 두 번 클릭하면 점이 추가되며, 삭제 전에 점을 선택해야 합니다.
- 원·타원·Inset 모드에서는 슬라이더로 각 값을 미세 조정하거나 정확한 백분율을 직접 입력하세요.
- 로컬에서 생성한 그라디언트 샘플 이미지 위에서 라이브 미리보기가 갱신되는 모습을 확인하세요.
- 한 줄짜리 clip-path 규칙을 복사해 스타일시트에 붙여넣기만 하면 됩니다.
두 상태에서 polygon 점 개수를 동일하게 유지하면 CSS transition으로 모양을 부드럽게 애니메이션할 수 있습니다.
관련 도구
- CSS 박스 섀도 생성기 무료 온라인 CSS box-shadow 생성기. 조정 가능한 오프셋, 블러, 확산, 색상, 인셋으로 아름다운 그림자를 시각적으로 생성. 라이브 미리보기 및 즉시 코드 복사.
- CSS 그라데이션 생성기 시각적으로 놀라운 CSS 그라데이션을 만드세요. 여러 색상 정지점, 각도 및 위치로 선형, 방사형 및 원뿔형 그라데이션을 생성하세요. 프로덕션 준비 코드를 즉시 복사하세요.
- 보더 레디우스 생성기 무료 온라인 border-radius 생성기. 핸들 8개를 드래그하거나 블롭 프리셋을 선택해 유기적인 CSS 셰이프를 만들고 코드를 바로 복사하세요.
- 색상 변환기 무료 온라인 색상 변환기. 비주얼 피커로 HEX, RGB, HSL, HSV 형식을 즉시 변환. 100% 비공개, 브라우저에서 실행.
- CSS 이징 생성기 무료 온라인 CSS 이징 생성기. 인터랙티브 곡선에서 cubic-bezier 제어점을 드래그하고, 18가지 프리셋 중 고르고, 반복되는 공 애니메이션으로 확인한 뒤 타이밍 함수를 즉시 복사하세요.
- CSS 텍스트 섀도 생성기 무료 온라인 CSS text-shadow 생성기. 오프셋, 블러, 색상, 불투명도를 조절해 여러 섀도 레이어를 쌓고, 네온·3D·레트로 프리셋을 적용해 즉시 CSS를 복사하세요.
- CSS 뷰티파이어 CSS 코드를 즉시 포맷하고 정리합니다. 사용자 정의 옵션으로 압축된 CSS를 읽기 쉬운 코드로 변환합니다.
- CSS 압축기 무료 온라인 CSS 압축기. 공백, 주석, 불필요한 문자를 제거하여 CSS 코드를 즉시 압축하고 최적화합니다. 파일 크기를 줄여 웹 성능을 향상시킵니다.