무료 온라인 도구
디자인 및 색상
브라우저에서 12개의 디자인 및 색상 도구를 빠르게 사용하세요.
CSS Flexbox 및 Grid 레이아웃 생성기
CSS Flexbox 및 Grid 그리드 레이아웃을 시각적으로 조율 및 프리뷰하고, 코드와 애니메이션을 즉시 생성합니다。
팔레트 생성기
임의 색상 또는 기준 색상을 바탕으로 세련된 컬러 팔레트를 생성하고 HEX/RGB로 복사할 수 있습니다.
SVG 최적화 및 압축기
SVG 코드를 로컬에서 최적화하고 불필요한 태그를 지워 크기를 줄이며, 원본과의 크기 비교 및 미리보기를 지원합니다.
CSS 그라데이션 생성기
선형 및 방사형 그라데이션을 시각적으로 조율하고, 엄선된 템플릿과 CSS 코드를 즉시 복사합니다。
색상 변환기 및 대비 검사기
HEX/RGB/HSL/CMYK 실시간 상호 변환 및 WCAG 2.1 기준 웹 접근성 색상 대비율을 검사합니다。
CSS 그림자 및 글래스모피즘 생성기
CSS 그림자와 백드롭 필터 블러 효과를 실시간 튜닝하고 CSS 코드를 복사합니다。
컬러 대비 분석 및 색맹 시뮬레이터
텍스트와 배경의 색상 대비율을 WCAG 2.1 기준으로 계산하고 접근성에 맞게 색상을 자동 보정하며, 이미지 색상 추출과 4가지 색맹 필터링 시뮬레이션을 지원합니다。
2D 물리 입자 및 중력 시뮬레이터
중력, 탄성, 마찰력, 자이로스코프 중력 및 마우스 인력을 시뮬레이션하는 2D 물리 입자 시뮬레이터입니다. 알파가 직접 물리 입자가 되어 귀엽게 부딪히고 튕깁니다!
비주얼 SVG Path 에디터
500×500 캔버스에서 앵커를 찍고 베지에 핸들을 드래그하면 SVG Path d 속성과 CSS clip-path: path() 코드를 즉시 생성합니다. 하트·별 템플릿 제공.
브라우저 목업 및 스크린샷 꾸미기
웹페이지 스크린샷을 올리면 macOS 스타일 브라우저 프레임, 그림자, 그라데이션 배경을 입혀 고해상도 PNG로 내보냅니다.
CSS 네온 및 발광 텍스트 생성기
다중 레이어 text-shadow, 네온 색상, 발광 반경 및 숨쉬기 깜빡임 속도를 조율하고 CSS 코드를 복사합니다。
스마트 이미지 컬러 피커 및 픽셀 확대경
로컬 이미지를 업로드하고 픽셀 아트 스타일 정밀 돋보기로 색상을 정밀 추출하며, HEX, RGB, HSL 복사 및 WCAG 색상 대비 검사를 제공합니다。
