모든 도구
디자인·CSS
색상, 대비, 그라디언트와 CSS 값을 만들고 조정하는 디자인 도구입니다. 시각적 결과를 확인하며 필요한 코드를 복사하세요.
사용 가능한 도구 8개
- CSS box-shadow 그림자 생성기여러 그림자 레이어의 위치, 흐림, 확산, 색상, 투명도와 inset을 조절해 CSS box-shadow 코드를 만듭니다.
- HTML·CSS·JavaScript 코드 플레이그라운드HTML, CSS, JavaScript를 편집해 sandbox iframe 미리보기와 콘솔을 확인하고 단일 HTML 파일로 저장합니다.
- WCAG 색상 대비율 검사기전경과 배경 HEX 색상의 WCAG 2.x 대비율을 계산하고 일반·큰 텍스트의 AA·AAA 통과 여부를 확인합니다.
- 컬러 피커 | 이미지·화면 색상 추출HEX·RGB·HSL을 변환하고 업로드·붙여넣기 이미지의 픽셀 또는 지원 브라우저 화면에서 색상을 추출합니다.
- CSS cubic-bezier 이징 생성기두 컨트롤 포인트를 드래그해 CSS 애니메이션·transition용 cubic-bezier 곡선을 만들고 동작을 미리 봅니다.
- 텍스트·이모지·이미지 Favicon PNG 생성기텍스트, 이모지 또는 이미지를 원형·사각형 아이콘으로 만들고 웹·Apple·Android·PWA용 6개 PNG 크기로 저장합니다.
- Linear·Radial CSS 그라디언트 생성기선형 또는 방사형 그라디언트의 방향, 모양, 색상 스톱과 위치를 시각적으로 편집하고 background CSS를 복사합니다.
- 브라우저 JavaScript 실행기·콘솔JavaScript를 별도 Web Worker에서 실행하고 콘솔, 마지막 식의 결과, 오류와 실행 시간을 확인합니다.