CSS 도구
CSS 단위 변환, 그라데이션, 그림자 등 시각 생성기
px ↔ rem ↔ em ↔ vw ↔ vh
px·rem·em·vw·vh CSS 단위를 양방향으로 변환합니다. base font-size와 viewport 크기를 조정해 디자인 시스템에 맞게 사용하세요.
Gradient Generator
linear/radial CSS 그라데이션을 시각적으로 만들고 코드를 복사하세요. 색상 정지점과 각도를 자유롭게 조절할 수 있습니다.
box-shadow Builder
여러 그림자 레이어를 시각적으로 조합해 box-shadow CSS를 만듭니다. offset·blur·spread·color를 라이브로 조정합니다.
Color Palette Generator
어울리는 5색 컬러 팔레트를 자동 생성합니다. 마음에 드는 색은 자물쇠로 고정하고 스페이스바로 나머지만 재생성하세요.
clamp() Generator
반응형 타이포그래피·스페이싱을 위한 CSS clamp() 값을 생성합니다. 최소·최대 뷰포트와 목표 크기를 슬라이더로 조정하고 실제 뷰포트에서 어떻게 보이는지 라이브 미리보기로 확인하세요.
border-radius Visualizer
8개의 핸들(4모서리 x/y)로 border-radius를 시각적으로 편집합니다. 비대칭 모서리·찌그러진 도형을 라이브 프리뷰로 확인하면서 CSS 코드를 복사하세요.
cubic-bezier Editor
cubic-bezier 곡선을 캔버스에서 직접 편집하고 프리셋(ease-in/out, bounce 등)을 불러옵니다. 실제 박스를 애니메이션으로 움직여 곡선이 어떻게 느껴지는지 즉시 확인할 수 있습니다.
CSS Minify
CSS에서 주석·공백·줄바꿈을 제거하고 절감률을 표시합니다. 변환은 브라우저에서 실행되어 스타일이 외부로 전송되지 않습니다.