CSS 모서리 둥글기 생성기

모서리마다 픽셀로 반지름을 정해 카드, 탭, 알약 모양 버튼을 만듭니다(999px이면 완전한 캡슐 모양). 8값 모드로 바꿔 핸들 네 개를 끌면 63% 37% 54% 46% / 55% 48% 52% 45% 같은 유기적인 블롭 모양도 만들 수 있습니다. 알약, 탭, 잎, 달걀 프리셋이 있습니다.

사용법

1. 위쪽 줄에서 생성기를 고르세요: 그라데이션, 박스 그림자, 모서리 둥글기, 글래스, 텍스트 그림자, clip-path, 이징, flexbox, grid.
2. 슬라이더를 바꾸거나 미리보기에서 직접 끌어 보세요. 그라데이션 막대의 색 지점, clip-path 점, 베지어 핸들, border-radius 핸들 네 개를 움직일 수 있습니다.
3. 원하면 코드 아래 프리셋에서 시작하세요.
4. 코드를 누르면 복사됩니다. 생성기마다 마지막 설정을 기억합니다.

• 그라데이션 막대의 빈 곳을 클릭하면 그 위치의 색으로 색 지점이 추가됩니다.
• 8값 border-radius 모드에서는 핸들 네 개가 값을 두 개씩 움직입니다. fancy border radius 도구와 같은 방식입니다.
• Safari에서는 backdrop-filter에 -webkit- 접두사가 필요해서 글래스 코드에 둘 다 넣었습니다.
• Flexbox와 grid에서는 미리보기의 번호 상자를 눌러 그 항목만의 grow, order, span을 정할 수 있습니다.

CSS를 눈으로 보며 만드는 이유

box-shadow, clip-path, cubic-bezier 같은 속성은 숫자가 여러 개라 결과를 떠올리기 어렵습니다. box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.25)는 가로 이동, 세로 이동, 흐림, 퍼짐, 색 순서입니다. cubic-bezier(0.34, 1.56, 0.64, 1)는 두 번째 y값이 1보다 커서 목표를 지나쳤다 돌아오는 움직임이 됩니다. 숫자를 고치고 새로고침하는 것보다 모양을 끌어 보며 결과를 보는 편이 훨씬 빠릅니다.

결과물은 프레임워크 없이 현재 주요 브라우저에서 모두 동작하는 순수 CSS라서 스타일시트, CSS-in-JS 객체, 디자인 토큰 파일에 바로 넣을 수 있습니다.

알아 두면 편한 기준값

그라데이션 각도는 위쪽에서 시계 방향으로 돌아갑니다. 0deg는 위, 90deg는 오른쪽, 180deg는 아래입니다. 이징 키워드는 ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1)과 같고, x값은 0~1 사이여야 합니다. border-radius는 값을 최대 8개까지 받으며 슬래시 앞은 가로, 뒤는 세로 반지름입니다. 30% 70% 70% 30% / 30% 30% 70% 70% 같은 값으로 말랑한 블롭 모양을 만듭니다.

보기 좋게 만드는 팁

자연스러운 그림자는 진한 그림자 하나보다 옅은 그림자 여러 겹으로 만들고, 순수한 검정보다 배경색을 섞은 그림자가 덜 탁해 보입니다. 유리 효과는 배경에서 가장 복잡한 부분 위에서도 글자가 읽히는지 대비를 확인하세요. 레이아웃은 한 방향으로 늘어놓을 때는 플렉스박스, 행과 열을 함께 다룰 때는 그리드가 알맞습니다. 미리 보기의 상자를 누르면 그 상자만의 grow, order, span을 정할 수 있습니다.

자주 묻는 질문