About CSS 스위치 생성기
CSS로 토글 스위치 컴포넌트 만들기
Use this free online css 생성기 tool to work faster without installing extra software. The interface is built for quick input, clear output, and straightforward results on desktop and mobile devices.
CSS로 토글 스위치 컴포넌트 만들기
Switch Style
Size & Shape
Colors
Preview
CSS
.switch {
position: relative;
display: inline-block;
width: 52px;
height: 28px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.switch-track {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e5e7eb;
border-radius: 50px;
transition: background-color 200ms ease;
}
.switch-track::before {
content: "";
position: absolute;
height: 24px;
width: 24px;
left: 2px;
bottom: 2px;
background-color: #ffffff;
border-radius: 50px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: transform 200ms ease;
}
.switch input:checked + .switch-track {
background-color: #3b82f6;
}
.switch input:checked + .switch-track::before {
transform: translateX(24px);
}
.switch input:focus + .switch-track {
box-shadow: 0 0 0 3px #3b82f633;
}HTML
<label class="switch"> <input type="checkbox" /> <span class="switch-track"></span> </label>
CSS로 토글 스위치 컴포넌트 만들기
Use this free online css 생성기 tool to work faster without installing extra software. The interface is built for quick input, clear output, and straightforward results on desktop and mobile devices.
This tool runs in your browser whenever possible, which keeps your inputs private and reduces unnecessary round-trips to the server.