디자인·CSS·UI
색상 변환기, CSS 그라데이션·박스섀도우, Tailwind 팔레트 등 웹 디자인 도구
Responsive 728x90 / 320x100 Ad Slot
(CLS Prevention Active · Zero Shift)등록된 도구 목록 (20)
색상 코드 실시간 변환기 및 조화 배색기
HEX, RGB, HSL, CMYK 상호 실시간 변환 및 보색, 유사색, 삼각배색 조화 팔레트 추천
웹 접근성 명암비(Contrast Ratio) 계산기
배경색과 텍스트 색상의 상대 휘도 명암비 계산 및 WCAG 2.1 AA/AAA 적합성 실시간 검증
CSS & Tailwind 그라데이션 에디터
선형(Linear) 및 원형(Radial) 그라데이션 시각적 조절 및 CSS/Tailwind 코드 원클릭 복사
박스 섀도우 & 글래스모피즘 생성기
부드러운 다중 레이어 그림자 및 반투명 유리 질감(Backdrop Blur) 시각적 생성 및 코드 복사
반응형 px ↔ rem ↔ vw 변환 & clamp() 수식기
루트 폰트 기준 px, rem, em, vw 동시 환산 및 미디어 쿼리 없는 CSS 유동 폰트 clamp() 수식 생성
CSS cubic-bezier 가속도 조절 & 모션 플레이어
3차 베지어 곡선 인터랙티브 조절 및 표준 ease 모션과의 실시간 가속도 비교 플레이어
Tailwind CSS 11단계 명도 팔레트 생성기
기준 HEX 컬러 1개로 50부터 950까지 11단계 명도 팔레트 및 tailwind.config.js 테마 코드 생성
CSS 클립 패스 폴리곤 메이커 (clip-path)
삼각형, 별, 화살표, 다각형 등 CSS clip-path: polygon(...) 도형을 시각적으로 조절하고 코드를 생성
뉴모피즘(Neumorphism) 부드러운 입체 UI 생성기
부드러운 볼록/오목 입체감을 주는 뉴모피즘 그림자 UI 및 CSS box-shadow 코드를 시각적으로 생성
CSS 유기적 물방울(Blob) & 8포인트 곡률 생성기
8방향 조절점으로 유기적인 물방울(Blob) 형태나 비대칭 둥근 모서리(border-radius)를 만드는 생성기
SVG 물결(Wave) 섹션 디바이더 생성기
웹페이지 섹션 구분용 부드러운 SVG 물결(Wave) 및 곡선 배경 코드를 레이어·색상별로 생성
CSS @keyframes 애니메이션 빌더 & 모션 프리뷰
바운스, 페이드인, 회전, 흔들림 등 자주 쓰는 CSS @keyframes 애니메이션을 프리뷰하며 코드를 복사
모듈러 스케일(Modular Scale) 서체 위계 계산기
본문 기준 폰트 크기와 음악적 비율(1.250 Major Third 등)을 선택해 h1~h6 타이포그래피 스케일을 자동 계산
CSS Grid 템플릿 & 벤토(Bento) 레이아웃 빌더
행(Rows), 열(Columns), 간격(Gap)을 지정하고 셀을 병합해 반응형 CSS Grid 및 Tailwind 코드를 생성
CSS 마우스 커서(Cursor) 속성 미리보기 & 테스터
웹 표준 35가지 이상의 CSS cursor 속성(pointer, grab, zoom-in 등) 위에 마우스를 올려 즉시 체험하고 복사
색상 블렌더 & 컬러 믹서 (Color Mixer & Blender)
두 가지 색상을 지정한 비율로 섞었을 때 나오는 중간색과 N단계 그라데이션 스텝 컬러를 추출
CSS 커스텀 스크롤바 스타일러 (Scrollbar Styler)
크롬/사파리/파이어폭스용 커스텀 스크롤바(두께, 트랙 색상, 썸 둥글기)를 디자인하고 CSS 코드를 생성
CSS 필터 & 백드롭(Glassmorphism) 생성기
blur, brightness, contrast, hue-rotate 등 CSS filter 및 반투명 유리 backdrop-filter 속성을 조합하는 시각적 도구
황금비율(Golden Ratio, 1:1.618) 레이아웃 계산기
디자인 및 사진 구도용 황금비율(1:1.618) 가로·세로 분할 치수 및 본문/사이드바 폭 계산기
카메라 피사계 심도(DoF) 및 과초점 거리 계산기
센서 크기(풀프레임, 크롭, M4/3)별 환산 화각, 조리개·거리 기반 피사계 심도(DoF) 및 팬포커스 과초점 거리 계산
Wide Responsive Banner
(CLS Prevention Active · Zero Shift)