MakerBox

CSS 토글 스위치 생성기

슬라이더·iOS·머티리얼·라인·점·눌린 모양·글자 표시 7가지 디자인의 켜짐/꺼짐 CSS 토글 스위치 — 크기·색상·전환 컨트롤과 복사용 HTML + CSS. 100% 브라우저에서 처리, 업로드 없음

실시간 미리보기 — 스위치를 클릭해 전환

트랙 (꺼짐)
트랙 (켜짐)
손잡이
CSS
.toggle-switch {
  display: inline-flex;
  position: relative;
  width: 56px;
  height: 30px;
  cursor: pointer;
}
.toggle-switch__input {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  opacity: 0;
}
.toggle-switch__track {
  position: absolute;
  inset: 0;
  background-color: #cbd5e1;
  border-radius: 15px;
  transition: background-color 0.3s ease;
}
.toggle-switch__knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
}
.toggle-switch__input:checked + .toggle-switch__track {
  background-color: #22c55e;
}
.toggle-switch__input:checked + .toggle-switch__track .toggle-switch__knob {
  transform: translateX(26px);
}
.toggle-switch__input:focus-visible + .toggle-switch__track {
  outline: 2px solid #22c55e;
  outline-offset: 2px;
}
HTML
<label class="toggle-switch">
  <input type="checkbox" class="toggle-switch__input" role="switch" />
  <span class="toggle-switch__track">
    <span class="toggle-switch__knob"></span>
  </span>
</label>

CSS는 스타일시트에 붙여넣고, HTML은 스위치가 필요한 곳에 넣으세요. 코드 복사를 누르면 둘을 한 덩어리로 받을 수 있어 CodePen이나 단일 파일 데모에 그대로 붙여넣을 수 있습니다.

🔒 브라우저에서 실행되며 업로드되지 않습니다.

순수 CSS 토글 스위치 만들기

디자인 7가지(슬라이더·iOS·머티리얼·라인·점·눌린 모양·글자 표시) 중 하나를 고르고, 너비와 높이를 정하고 꺼짐 트랙·켜짐 트랙·손잡이 색상을 고른 뒤 둥근 알약 또는 각진 모양과 전환 속도를 조절하세요. 글자 표시 디자인은 스위치 안에 글자를 그리므로 켜짐 글자·꺼짐 글자와 글자 색상 컨트롤이 함께 나타납니다. 컨트롤을 움직일 때마다 미리보기가 즉시 갱신되며, 생성되는 코드는 자바스크립트가 필요 없는 체크박스+라벨 스위치입니다 — :checked 상태가 손잡이를 밀고 트랙 색을 CSS 트랜지션으로 바꿉니다.

HTML과 CSS 복사

CSS는 스타일시트에 붙여넣고 HTML 조각은 스위치가 필요한 곳에 넣으세요. 실제 <input type="checkbox">이며 role="switch"를 가지므로 키보드로 조작할 수 있고 폼에서도 바로 동작하며 외부 라이브러리가 필요 없습니다.

자주 묻는 질문

이 토글 스위치에 자바스크립트가 필요한가요?

아니요. 스위치는 CSS로 스타일링한 체크박스와 라벨입니다. :checked 의사 클래스가 손잡이를 밀고 트랙 색을 바꾸므로 자바스크립트 없이 동작합니다.

스위치는 접근성이 좋은가요?

네. role="switch"를 가진 기본 체크박스 input이라 포커스가 가능하고 키보드로 토글되며 폼과 스크린 리더와도 잘 동작합니다.

켜짐/꺼짐 색상은 어떻게 바꾸나요?

"트랙(꺼짐)", "트랙(켜짐)", "손잡이" 색상 선택기를 쓰거나 임의의 CSS 색상을 입력하세요. 꺼짐 색은 해제 상태에, 켜짐 색은 켜졌을 때 나타납니다. 글자 표시 디자인에서는 글자 색상도 따로 지정할 수 있습니다.