CSS 체크박스 생성기
비주얼 에디터로 커스텀 CSS 체크박스를 만듭니다. 애니메이션, 색상, 모양을 자유롭게 커스터마이즈합니다.
#6366f1
#ffffff
#d1d5db
미리보기
HTML 코드
<label class="custom-checkbox">
<input type="checkbox" />
<span class="checkmark"></span>
Label text
</label>CSS 코드
.custom-checkbox {
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
gap: 8px;
font-size: 14px;
color: #374151;
}
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.custom-checkbox .checkmark {
position: relative;
height: 24px;
width: 24px;
background-color: #ffffff;
border: 2px solid #d1d5db;
border-radius: 50%;
transition: all 0.2s ease;
flex-shrink: 0;
}
.custom-checkbox:hover .checkmark {
border-color: #6366f1;
}
.custom-checkbox input:checked + .checkmark {
background-color: #6366f1;
border-color: #6366f1;
}
.custom-checkbox .checkmark::after {
content: "";
position: absolute;
display: none;
left: 5px;
top: 2px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.custom-checkbox input:checked + .checkmark::after {
display: block;
}이 도구 공유
📖
사용 방법
Step 1
디자인 선택
체크박스 디자인 템플릿을 선택합니다
→
Step 2
커스터마이즈
색상, 크기, 테두리 반경, 애니메이션 등을 조정합니다
→
Step 3
코드 복사
HTML/CSS 코드를 복사합니다
✨
기능
실시간 미리보기
커스터마이즈를 실시간으로 미리봅니다
풍부한 템플릿
체크마크, 슬라이드, 바운스 등 다양한 애니메이션 템플릿
접근성 지원
시맨틱 HTML 구조로 스크린 리더 친화적인 코드를 생성합니다
❓
FAQ
브라우저 기본 체크박스를 커스텀 CSS 디자인으로 스타일링한 것입니다.
🔗관련 도구
🎨
디자인 도구색상 코드 변환기
HEX, RGB, HSL 색상 코드 간 변환을 합니다. 색상 선택기와 실시간 미리보기로 직관적인 색상 선택이 가능합니다.
🎨
디자인 도구색상 선택기
색상 휠과 슬라이더로 직관적으로 색상을 선택하세요. HEX, RGB, HSL 형식의 색상 코드를 확인하고 복사할 수 있습니다.
🎨
디자인 도구이미지 색상 추출기
이미지에서 대표 색상을 자동으로 감지하고 색상 팔레트를 생성합니다. 이미지의 아무 곳이나 클릭하여 개별 색상을 추출할 수도 있습니다.
🎯
디자인 도구이미지 평균 색상 추출기
이미지 전체 또는 선택 영역의 평균 색상을 계산합니다. 색상 배합이나 썸네일 배경색 선택에 유용합니다.
🌈
디자인 도구CSS 그라데이션 생성기
드래그 조작으로 CSS 그라데이션을 시각적으로 만듭니다. 선형, 원형, 원추형 그라데이션 유형과 프리셋을 지원합니다.
🔲
디자인 도구CSS 박스 그림자 생성기
슬라이더로 CSS box-shadow를 시각적으로 만듭니다. 다중 그림자와 내부 그림자를 지원합니다.