무료 디자인·CSS 도구

종횡비 계산기 레이아웃 가로·세로 값을 기준으로 비율과 CSS aspect-ratio 값을 계산합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 디자인 컬러 토큰 생성기 색상 디자인 컬러 토큰 생성기는 HEX 색상 목록을 CSS 변수, JSON 토큰, 상태 색상 이름으로 정리해 디자인 시스템과 프런트엔드 코드에 바로 옮기기 쉽게 만드는 도구입니다. CSS Grid 생성기 레이아웃 컬럼 수, 간격, 최소 폭을 입력해 CSS Grid 코드를 생성합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 디자인 값을 입력합니다. 미리보기와 생성된 CSS를 확인합니다. 코드를 복사해 프로젝트에 적용합니다. Flexbox 생성기 레이아웃 방향, 정렬, 간격 값을 고르면 Flexbox CSS와 미리보기를 생성합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 방향, 정렬, 간격 값을 고르면 Flexbox CSS와 미리보기를 생성합니다. CSS clamp 생성기 CSS 반응형 폰트나 간격에 쓸 clamp() 값을 계산합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 터치 타깃 크기 체크 접근성·상태 버튼의 가로·세로 크기를 입력해 모바일 터치 타깃 기준에 맞는지 확인합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 버튼의 가로·세로 크기를 입력해 모바일 터치 타깃 기준에 맞는지 확인합니다. Focus Ring 생성기 접근성·상태 키보드 포커스 표시용 outline과 box-shadow 스타일을 미리 봅니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 키보드 포커스 표시용 outline과 box-shadow 스타일을 미리 봅니다. UI 상태 색상 팔레트 생성기 색상 UI 상태 색상 팔레트 생성기는 기본 색상에서 hover, active, disabled, focus, danger, success 같은 상태 색상 후보를 만들고 디자인 토큰으로 정리하는 도구입니다. CSS Filter 미리보기 CSS CSS filter 값을 조정하고 이미지 또는 샘플 영역에서 미리봅니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. CSS filter 값을 조정하고 이미지 또는 샘플 영역에서 미리봅니다. SVG 구분선 생성기 디자인 웨이브형 SVG 구분선을 만들고 마크업을 복사합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 디자인 값을 입력합니다. 미리보기와 생성된 CSS를 확인합니다. 코드를 복사해 프로젝트에 적용합니다. 간격 토큰 스케일 생성기 레이아웃 간격 토큰 스케일 생성기는 기준 간격과 배율을 바탕으로 margin, padding, gap에 쓸 spacing token과 CSS 변수를 만드는 디자인 시스템 도구입니다. 타이포그래피 스케일 생성기 CSS 타이포그래피 스케일 생성기는 기준 폰트 크기와 배율을 입력해 제목, 본문, 캡션에 쓸 글자 크기 단계와 CSS 값을 정리하는 디자인 시스템 도구입니다. Media Query 생성기 레이아웃 브레이크포인트 조건을 입력해 반응형 CSS 미디어 쿼리를 만듭니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 필요한 CSS 조건이나 값을 입력합니다. 미리보기와 생성된 코드를 확인합니다. 복사한 코드를 프로젝트에 맞게 적용합니다. Container Query 생성기 레이아웃 카드나 섹션 단위 반응형에 쓰는 CSS 컨테이너 쿼리 코드를 생성합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 카드나 섹션 단위 반응형에 쓰는 CSS 컨테이너 쿼리 코드를 생성합니다. CSS Easing 생성기 CSS cubic-bezier 값을 조정하고 전환 타이밍 함수를 복사합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 필요한 CSS 조건이나 값을 입력합니다. 미리보기와 생성된 코드를 확인합니다. 필요한 CSS 조건이나 값을 입력합니다. CSS 애니메이션 생성기 CSS 페이드와 이동이 포함된 간단한 keyframes 애니메이션 CSS를 만듭니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 페이드와 이동이 포함된 간단한 keyframes 애니메이션 CSS를 만듭니다. Z-index Scale 생성기 레이아웃 오버레이, 드롭다운, 모달 등 UI 레이어별 z-index 토큰을 만듭니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 오버레이, 드롭다운, 모달 등 UI 레이어별 z-index 토큰을 만듭니다. CSS Transform 생성기 레이아웃 이동, 회전, 확대 값을 조합해 transform CSS를 미리 보고 복사합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 이동, 회전, 확대 값을 조합해 transform CSS를 미리 보고 복사합니다. CSS 스크롤바 생성기 CSS 스크롤바 두께, 색상, 반경을 조정하고 CSS 코드를 생성합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 필요한 CSS 값을 입력합니다. 미리보기와 생성된 코드를 확인합니다. 복사한 CSS를 프로젝트에 맞게 적용합니다. Skeleton Loader 생성기 접근성·상태 로딩 상태에 쓰는 스켈레톤 UI 애니메이션 CSS를 만듭니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 필요한 CSS 값을 입력합니다. 미리보기와 생성된 코드를 확인합니다. 복사한 CSS를 프로젝트에 맞게 적용합니다. CSS 로딩 스피너 접근성·상태 크기, 두께, 색상, 속도를 조정해 로딩 스피너 CSS를 생성합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 필요한 CSS 값을 입력합니다. 미리보기와 생성된 코드를 확인합니다. 복사한 CSS를 프로젝트에 맞게 적용합니다. CSS Clip-path 생성기 CSS 다이아몬드, 육각형, 말풍선 같은 clip-path 도형 CSS를 만듭니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 다이아몬드, 육각형, 말풍선 같은 clip-path 도형 CSS를 만듭니다. CSS Mask Fade 생성기 CSS 스크롤 영역이나 이미지 가장자리를 부드럽게 사라지게 하는 mask CSS를 만듭니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 스크롤 영역이나 이미지 가장자리를 부드럽게 사라지게 하는 mask CSS를 만듭니다. SVG 최적화기 디자인 SVG 코드의 주석, 불필요한 공백, 메타데이터를 줄이고 데이터 URI도 함께 생성합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. CSS 변수 테마 생성기 CSS 브랜드 색상과 반경 값을 CSS 변수 테마 코드로 정리합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. rem·px 변환기 레이아웃 기준 폰트 크기를 바탕으로 px와 rem 값을 빠르게 서로 변환합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 도구 화면에 필요한 입력값이나 텍스트를 넣습니다. 계산, 생성, 변환 버튼을 눌러 결과를 확인합니다. Viewport 단위 계산기 레이아웃 화면 크기 기준으로 vw, vh, vmin 값을 px로 환산해 레이아웃 값을 잡습니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 화면 크기 기준으로 vw, vh, vmin 값을 px로 환산해 레이아웃 값을 잡습니다. 색상 코드 변환 색상 색상 코드 변환은 같은 색을 HEX, RGB, HSL 등 서로 다른 표기 형식으로 바꿔 주는 도구입니다. 디자인 시안에서는 HEX(#FF5733)로 받았는데 코드에서는 rgb(255, 87, 51)이나 hsl 값이 필요한 상황처럼, 형식만 달라 매번 손으로 환산하던 번거로움을... 컬러 믹서 색상 컬러 믹서는 두 가지 이상의 색을 섞었을 때 어떤 색이 나오는지 미리 확인할 수 있는 도구입니다. 시작 색과 끝 색을 정하고 그 사이를 섞으면, 두 색이 자연스럽게 이어지는 중간 색들을 한눈에 볼 수 있어 색 조합을 감각이 아닌 결과로 확인할 수 있습니다. 색상 팔레트 생성기 색상 색상 팔레트 생성기는 하나의 기준 색에서 서로 잘 어울리는 색들의 묶음을 만들어 주는 도구입니다. 디자인을 시작할 때 가장 막막한 부분이 색 조합인데, 기준 색 하나만 정하면 보색·유사색·삼각 배색 같은 색 이론에 따라 조화로운 팔레트를 자동으로 제안받을 수 있습니다. CSS 그라데이션 생성기 색상 CSS 그라데이션 생성기는 두 가지 이상의 색이 부드럽게 이어지는 배경을 시각적으로 만들고, 그 결과를 바로 쓸 수 있는 CSS 코드로 뽑아 주는 도구입니다. 컨트라스트 대비 확인기 접근성·상태 컨트라스트 대비 확인기는 글자색과 배경색 두 가지를 입력하면 둘 사이의 명도 대비(contrast ratio)를 계산해 주는 도구입니다. 결과는 4.5:1, 7:1 같은 숫자로 표시되며, 이 값이 웹 접근성 기준(WCAG)의 AA·AAA 등급을 통과하는지 함께 알려 줍니다. 접근성 색상 대비 팔레트 색상 접근성 색상 대비 팔레트는 기본 색상 표를 출발점으로 텍스트와 배경 조합의 명도 차이, WCAG 대비 확인, 안정적인 UI 색상 선택을 돕는 참고 도구입니다. CSS 박스 섀도우 생성기 CSS CSS 박스 섀도우 생성기는 요소에 그림자를 입히는 box-shadow 속성을 시각적으로 조정하고, 그 결과를 바로 쓸 수 있는 코드로 만들어 주는 도구입니다. CSS 버튼 스타일러 CSS CSS 버튼 스타일러는 웹 페이지에 들어가는 버튼의 모양을 슬라이더와 색상 선택만으로 디자인하고, 그 결과를 그대로 쓸 수 있는 CSS 코드로 뽑아 주는 도구입니다. CSS 테두리 반경 생성기 CSS CSS 테두리 반경 생성기는 요소의 네 모서리 둥글기(border-radius)를 슬라이더로 조절하면서 그 결과를 실시간 미리보기와 CSS 코드로 보여 주는 도구입니다. Tailwind 컬러 칩 확인기 색상 Tailwind 컬러 칩 확인기는 Tailwind CSS가 기본으로 제공하는 색상 팔레트를 한눈에 보여 주고, 각 색의 실제 값을 바로 확인할 수 있게 해 주는 도구입니다. 시스템 폰트 스택 생성기 CSS 시스템 폰트 스택 생성기는 운영체제 기본 글꼴과 안전한 fallback 조합을 비교하고, 웹폰트 없이도 빠르게 표시되는 font-family 코드를 정리하는 도구입니다. 반응형 rem·px 변환기 레이아웃 반응형 rem·px 변환기는 같은 rem 값이 사용자의 브라우저 기본 글자 크기(14·16·18·20px)에서 각각 몇 px로 보이는지 표로 비교해, 접근성 확대 설정까지 고려해 안전한 글자 크기를 고르도록 돕는 CSS 도구입니다. CSS Shape·말풍선 꼬리 생성기 CSS CSS Shape·말풍선 꼬리 생성기는 border와 clip-path 기법으로 삼각형, 화살표, 말풍선 꼬리 같은 작은 UI 도형의 CSS 코드를 만드는 도구입니다. Glass UI CSS 효과 생성기 CSS Glass UI CSS 효과 생성기는 backdrop-filter, 투명 배경, 테두리, 그림자를 조합해 카드와 모달에 쓸 유리 질감 CSS를 미리 보고 복사하는 도구입니다. 네온·글로우 CSS 효과 생성기 CSS 네온·글로우 CSS 효과 생성기는 텍스트나 버튼에 적용할 text-shadow, box-shadow 기반 발광 효과를 만들고 접근성 주의점과 함께 코드를 정리하는 도구입니다. 패턴 배경 생성기 디자인 패턴 배경 생성기는 점·줄무늬·격자·체크무늬 같은 반복 무늬 배경을 CSS만으로 만들어 주는 도구입니다. 무늬 종류와 색, 간격, 굵기 등을 조절하면 미리보기 배경이 실시간으로 바뀌고, 그에 맞는 CSS 코드가 함께 생성됩니다. 프리미엄 그라데이션 프리셋 색상 프리미엄 그라데이션 프리셋은 골드, 실버, 브론즈뿐 아니라 배지, 가격표, 프로모션 버튼에 쓸 수 있는 CSS 그라데이션 견본을 비교하고 복사하는 도구입니다. 이미지 컬러 픽커 색상 이미지 컬러 픽커는 사진이나 그림에서 원하는 지점의 색을 정확히 집어내, 그 색의 코드를 알려 주는 도구입니다. 마음에 드는 색이 담긴 이미지를 올리고 해당 부분을 클릭하면, 눈으로 어림짐작하는 대신 실제 픽셀 색을 HEX·RGB 값으로 확인할 수 있습니다. 이미지 플레이스홀더 생성기 디자인 이미지 플레이스홀더 생성기는 아직 실제 사진이 준비되지 않은 자리에 테스트용로 끼워 넣을 회색 더미 이미지를 만들어 주는 도구입니다. 가로·세로 크기를 입력하면 그 크기에 맞춘 사각형 이미지가 생성되고, 가운데에는 보통 해당 해상도(예: 640×360)가 글자로 표시됩니다. 웹사이트 스크린샷 목업 시뮬레이터 디자인 웹사이트 스크린샷 목업 시뮬레이터는 캡처해 둔 화면 이미지를 노트북·모니터·스마트폰 같은 기기 틀(목업) 안에 끼워 넣어, 실제 제품처럼 보이는 합성 이미지를 만들어 주는 도구입니다. UI 그림자 토큰 프리셋 생성기 CSS UI 그림자 토큰 프리셋 생성기는 카드, 팝오버, 모달, 버튼 상태에 쓸 box-shadow 값을 elevation token처럼 정리해 디자인 시스템에 맞게 복사하는 도구입니다. 그라데이션 텍스트 CSS 생성기 색상 그라데이션 텍스트 CSS 생성기는 두 색상 이상을 조합해 background-clip 기반 텍스트 그라데이션 코드를 만들고 읽기 쉬운 fallback 색상까지 함께 정리하는 도구입니다. 아이콘 배경 안전여백 생성기 디자인 아이콘 배경 안전여백 생성기는 앱 아이콘, 로고, 파비콘용 캔버스에서 패딩, 둥근 모서리, 배경색을 계산해 잘림 없는 아이콘 이미지를 준비하는 도구입니다.