디자인( CSS)
실시간 로컬 미리보기로 실용적인 색상과 CSS를 생성하세요.
색상 변환기
HEX, RGB 및 HSL 색상을 변환하고 정확한 결과를 미리 보세요.
열기 도구 →CSS 그라디언트 생성기
두 가지 색상의 선형 그라디언트를 만들고 바로 사용할 수 있는 CSS를 복사하세요.
열기 도구 →WCAG 대비 검사기
두 색상 사이의 대비 비율을 계산하고 일반적인 WCAG AA 및 AAA 텍스트 기준을 확인합니다.
열기 도구 →CSS 상자 그림자 생성기
실시간 색상, 오프셋, 흐림, 확산 값을 사용해 box-shadow를 구성하세요.
열기 도구 →CSS 텍스트 그림자 생성기
읽기 쉬운 text-shadow 선언을 작성하고 선택한 배경에서 미리 보세요.
열기 도구 →CSS 테두리 반경 생성기
네 개의 독립적인 모서리 반지름을 설정하고 생성된 CSS 선언을 내보내세요.
열기 도구 →반응형 CSS 클램프 생성기
뷰포트 너비 전반에 걸쳐 최소 및 최대 크기 사이의 유동적인 clamp 식을 계산합니다.
열기 도구 →PX ↔ REM 변환기
명시적인 루트 글꼴 크기를 사용하여 접근성 높은 레이아웃을 위해 픽셀과 rem 단위를 변환합니다.
열기 도구 →CSS 삼각형 생성기
크기와 색상을 설정할 수 있는 네 방향용 0 크기 CSS 테두리 삼각형을 생성합니다.
열기 도구 →색상 음영 생성기
복사 가능한 CSS 변수로 HEX 색상에서 결정적인 밝은색-어두운색 음영 스케일을 생성합니다.
열기 도구 →CSS 로더 생성기
크기, 두께, 속도 및 색상을 조절할 수 있는 가볍고 접근성이 좋은 스피너를 생성합니다.
열기 도구 →CSS 특이성 계산기
선택자 특이성을 계산하고 ID, 클래스, 속성, 의사 클래스 및 요소 선택자를 비교하세요.
열기 도구 →CSS 이징 함수 빌더
cubic-bezier 제어점을 검증하고 재사용 가능한 전환 타이밍 CSS를 생성합니다.
열기 도구 →CSS 사용자 정의 속성 추출기
CSS 변수 선언, 중복 정의, 그리고 최신으로 해결된 텍스트 값을 찾습니다.
열기 도구 →CSS 미디어 쿼리 빌더
명시적인 반응형 조건에서 너비, 방향 및 모션 선호 미디어 쿼리를 생성합니다.
열기 도구 →CSS 색상 값 추출기
붙여넣은 CSS에서 HEX, RGB, HSL 및 현대적인 함수형 색상 값을 추출하고 계산합니다.
열기 도구 →CSS는 규칙 빌더를 지원합니다
검증된 CSS 선언 하나에서 긍정 및 대체 기능 쿼리를 생성합니다.
열기 도구 →CSS 글꼴 스택 빌더
명시적인 일반 대체 글꼴과 중복 제거가 포함된 따옴표 처리된 font-family 스택을 만드세요.
열기 도구 →CSS z-인덱스 분석기
스타일시트를 실행하지 않고 숫자 z-index 선언을 추출하고 스태킹 값을 순위화합니다.
열기 도구 →CSS 애니메이션 지속 시간 감사 도구
인벤토리 애니메이션 및 전환 시간과 reduced-motion 처리가 있는지 보고하십시오.
열기 도구 →CSS 중단점 인벤토리
min-width 및 max-width 미디어 쿼리 중단점을 추출하고 빈도와 순서를 보고합니다.
열기 도구 →CSS 논리적 속성 검사기
writing-mode에 친화적인 레이아웃을 위해 물리적 CSS 속성 사용과 흐름 상대적 CSS 속성 사용을 비교합니다.
열기 도구 →CSS 글꼴 크기 목록
값과 단위별로 font-size 선언을 추출하여 일관성 없는 타이포그래피 스케일을 드러내세요.
열기 도구 →CSS Grid 트랙 분석기
repeat 및 minmax 사용 요약이 포함된 인벤토리 grid-template 행 및 열 선언.
열기 도구 →이 페이지에 일치하는 도구가 없습니다.