CSS 블롭 모양 생성기
8방향 border-radius로 유기적인 블롭 도형 CSS를 만들어요
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
border-radius 슬래시 구문의 8개 값을 슬라이더로 조절해 물방울, 나뭇잎 같은 유기적인 블롭 모양을 실시간 미리보기로 확인할 수 있는 도구입니다. 디자이너나 프론트엔드 개발자가 배경 장식, 프로필 이미지 마스크, 카드 UI 등에 쓸 CSS를 빠르게 뽑아낼 때 유용해요. 모든 계산은 브라우저에서만 이뤄지며 서버로 전송되지 않습니다.
사용 방법
- 유기적, 물방울, 나뭇잎, 달걀 중 원하는 프리셋을 선택해 시작해요.
- 가로(수평)와 세로(수직) 8개 슬라이더를 움직여 모양을 세밀하게 조정해요.
- 미리보기에서 실시간으로 변하는 블롭 모양을 확인해요.
- 완성된 border-radius CSS 코드를 복사 버튼으로 가져가 프로젝트에 붙여넣어요.
자주 묻는 질문
- 생성된 CSS는 모든 브라우저에서 잘 작동하나요?
- border-radius의 슬래시(/) 구문은 현대 브라우저에서 폭넓게 지원됩니다. 다만 구형 브라우저를 지원해야 한다면 별도 테스트를 권장해요.
- 슬라이더 값은 무엇을 의미하나요?
- 슬래시 앞 4개 값은 각 모서리의 가로 방향 반경, 뒤 4개 값은 세로 방향 반경입니다. 값을 조합해 다양한 곡선 모양을 만들 수 있어요.
- 이미지에도 이 모양을 적용할 수 있나요?
- 네, 생성된 border-radius 값을 이미지나 div 요소의 CSS에 그대로 적용하면 해당 요소가 블롭 형태로 잘려 보입니다.