CSS clip-path 생성기
원·타원·직사각형·다각형 도형을 고르면 CSS clip-path 코드를 만들어 주고 결과를 미리 보여줍니다.
%
%
%
미리보기
CSS
clip-path: circle(50% at 50% 50%);
polygon()은 점을 순서대로 이어 붙여 도형을 만듭니다. 최소 3개의 점이 필요하고, 점을 잇는 순서에 따라 모양이 달라집니다. circle()·ellipse()의 위치(at)를 생략하면 요소의 정중앙 (50% 50%)이 기본값입니다.
사용 방법
- 1자를 도형(원·타원·직사각형·다각형)을 고릅니다.
- 2도형별 값(반지름·위치·다각형 좌표 등)을 입력합니다.
- 3미리보기로 확인하고 CSS를 복사해 씁니다.
자주 묻는 질문
요소를 지정한 도형 밖으로 잘라내 보이지 않게 만듭니다. 사각형 이미지를 원이나 다각형 모양으로 보이게 할 때, 또는 스크롤이나 호버에 맞춰 도형이 서서히 나타나는 효과를 만들 때 씁니다.
요소의 왼쪽 위를 (0% 0%)로 두고, 원하는 점들을 순서대로 이어 붙이면 그 점들을 연결한 다각형이 잘림 영역이 됩니다. 최소 3개의 점이 필요하고, 점을 잇는 순서(시계 방향이든 반시계 방향이든)에 따라 모양이 달라지므로 순서를 신경 써야 합니다.
반지름만으로는 도형을 어디에 그릴지 알 수 없어, 중심점을 at 뒤에 지정합니다. 생략하면 요소의 정중앙(50% 50%)이 기본값입니다. 중심을 옮기면 원이 한쪽으로 치우친 모양도 만들 수 있습니다.
잘라낼 직사각형의 네 모서리를 둥글게 깎는 정도입니다. border-radius와 비슷한 개념이며, 0이면 각진 사각형 그대로 나옵니다.
알아두면 좋은 점
- circle()·ellipse()·polygon()·inset() 문법과 좌표 규칙(시계 방향으로 점을 이어 도형을 만들고, polygon은 최소 3점 필요)은 MDN 'polygon() CSS function' 문서와 CSS-Tricks clip-path almanac을 WebSearch로 교차 확인했습니다(2026-09-05). CSS 스펙이라 이견이 없습니다.
- 이 도구는 값을 그대로 문자열로 조립하는 결정적 생성기입니다. 애니메이션(clip-path 전환)은 만들어진 코드에 직접 transition을 더해 쓰세요.
함께 보면 좋은 도구
CSS 그리드행·열과 간격을 고르면 CSS 그리드 코드를 만들어 주고 결과를 미리 보여줍니다.CSS 플렉스박스flex-direction·justify-content·align-items 등을 고르면 CSS 플렉스박스 코드를 만들어 주고 결과를 미리 보여줍니다.박스 섀도우 생성오프셋·흐림·퍼짐·색상을 조절해 box-shadow CSS 코드를 만들고 미리보기로 바로 확인합니다.gitignore 판정.gitignore 규칙과 경로를 넣으면 그 파일이 무시되는지, 어느 줄이 마지막으로 이겼는지 알려줍니다.울프람 규칙규칙 번호 0~255를 8비트로 풀어 세 칸 이웃에 대응시키고 세대를 쌓아 무늬를 그립니다.
마지막 검증: 2026년 9월 5일 · 결과는 참고용 추정치입니다.