Border Radius 생성기
시각적 border-radius 편집기: 균일 모드(빠른 라운딩), 코너별 모드(채팅 버블·탭), 타원 모드(블랍 — 가로 반지름 ≠ 세로). 손으로 만들 법한 흔한 형태들의 프리셋 제공. 단위는 `px`·`%`·`rem`. 출력은 가능한 짧은 유효 CSS — 모든 코너가 같으면 한 값, 다르면 4값, 타원이면 `h / v` 풀 문법.
—
프리셋
미리보기
CSS
border-radius: 16px;사용법
- 프리셋으로 시작하거나 '균일' 해제 후 코너별 편집.
- 블랍 모양엔 '타원' 토글(각 코너에 두 반지름).
- `border-radius: …`를 복사해 CSS에 붙여넣기.
자주 묻는 질문
- 타원 반지름은 언제 쓸모 있나요?
- 주로 일러스트의 유기적 '블랍' 모양 — 코너마다 비대칭. 표준 UI는 거의 균일 또는 4값.
- px vs % 반지름?
- %는 요소의 가로/세로에 상대적 — 정사각에 50%면 원, 직사각에 50%면 타원. px는 요소 크기와 무관히 절대값.
- 정사각형에 필 프리셋이 이상해 보여요.
- Pill = 999px는 요소가 세로보다 가로 길다고 가정. 정사각이면 그냥 원이 됩니다.
- 브라우저 지원?
- 4값 `border-radius`와 타원 문법은 2010년 이후 모든 브라우저 지원. 어디서나 안전.
관련 도구
이미지 둥근 모서리
이미지에 둥근 모서리·완전 원형 마스크·코너별 반경 적용 — 투명도 체커보드 미리보기, PNG·JPEG 다운로드.
이미지 0 0
CSS 삼각형 생성기
순수 CSS로 8방향 삼각형 — border 트릭 또는 clip-path, 규칙 복사 후 붙여넣기.
색상 0 0
CSS clip-path 빌더 (원, 타원, 다각형, Inset)
CSS `clip-path` 속성의 시각 빌더 — 도형 선택 (원, 타원, inset, 다각형), 슬라이더나 미리보기 클릭으로 다각형 점 추가, 붙여넣기 바로 가능한 CSS 선언 복사. 10가지 도형 프리셋 (삼각형, 육각형, 별, 화살표, 말풍선, 십자 등) 포함.
색상 0 0
CSS 그라디언트 생성기
선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.
색상 0 0
CSS Box Shadow 생성기
여러 레이어로 CSS box-shadow를 디자인 — 실시간 미리보기 + CSS·Tailwind 출력.
색상 0 0
CSS 필터 플레이그라운드
blur·brightness·contrast·hue·sepia·invert 등 9개 필터 시각 조합 — CSS 또는 Tailwind 임의값으로 복사.
색상 0 0