디자인 및 CSS
CSS 그라디언트, 그림자, 색상 스케일을 생성하고 명도 대비를 확인하세요 — 바로 복사 가능한 코드.
코드 이미지 변환기
코드 스니펫을 브라우저 안에서 구문 강조 이미지로 바꿔 줍니다. 20종 이상의 언어, 사용자 지정 테마·배경, 줄 번호, PNG·SVG 내보내기를 지원합니다.
색상 대비 검사기
텍스트색과 배경색의 WCAG 2.1 대비와 APCA Lc 점수를 확인하고 AA·AAA·3:1 배지를 보며 가장 가까운 통과 색을 적용합니다.
색상 혼합기
두 HEX 색을 원하는 비율로 RGB 또는 Lab 색공간에서 섞어, 만들어진 중간 색을 견본과 복사 가능한 HEX 값으로 보여줍니다.
색상 셰이드 생성기
기준 HEX 색 하나를 OKLCH·HSL·RGB 셰이드 스케일로 변환하고 단계 수 조절, 단계별 WCAG 대비 힌트, CSS·Tailwind·JSON 내보내기를 제공합니다.
색맹 시뮬레이터
이미지를 업로드해 제1·제2·제3색맹이나 전색맹으로 보이는 모습을 미리 보고 시뮬레이션 결과를 내려받습니다.
CSS 둥근 모서리 생성기
타원형 가로·세로 반경을 포함한 8개의 border-radius 모서리 값을 조정해 라이브 박스 미리보기를 보고 단축 CSS를 복사하세요.
CSS 박스 그림자 생성기
오프셋·블러·스프레드·색상·inset 컨트롤로 다중 레이어 CSS box-shadow를 만들고 바로 쓸 수 있는 box-shadow 속성을 복사하세요.
CSS clamp() 생성기
최소·최대 폰트 크기와 최소·최대 뷰포트 너비를 중단점 없는 한 줄짜리 CSS clamp() 유동 타이포그래피 표현식으로 변환합니다.
CSS clip-path 생성기
원·타원·다각형·inset·둥근 inset 프리셋과 숫자 입력으로 CSS clip-path를 만들고 실시간으로 미리 보며 바로 쓸 수 있는 속성을 복사하세요.
CSS 큐빅 베지어 생성기
핸들을 드래그해 CSS cubic-bezier 또는 steps() 이징을 편집하고, 실시간 애니메이션으로 미리 본 뒤 값을 복사하세요.
CSS Flexbox & Grid 놀이터
CSS Flexbox 또는 Grid를 시각적으로 구성 — 컨테이너·아이템별 컨트롤, 커스텀 트랙 사이징, grid-template-areas 편집기로 만들고 생성된 CSS를 복사하세요.
CSS 글래스모피즘 생성기
블러·투명도·채도·테두리·그림자 컨트롤과 색조 색상으로 backdrop-filter 기반 유리 효과 CSS를 만들고 배경 위에서 미리보고 복사하세요.