Is JavaScript required?

No, it works with CSS and HTML only. Toggle state is controlled via :checked selector.

Yes, generates code with input[type="checkbox"] and role="switch" for proper screen reader recognition.

Can it work with dark mode?

Yes, colors for both ON and OFF states can be set individually for dark mode compatibility.

Yes, all processing is done in your browser.

CSS Toggle Switch Generator

Create custom CSS toggle switches with a visual editor. Adjust size, color, and animation, then export the code.

Width: 52px

Height: 28px

Border Radius: 50px

On Color

#6366f1

Off Color

#d1d5db

Thumb Color

#ffffff

Animation

Preview

Wi-Fi

Bluetooth

HTML Code

<label class="toggle-switch">
    <input type="checkbox" />
    <span class="slider"></span>
</label>

CSS Code

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d1d5db;
    border-radius: 50px;
    transition: background-color 0.3s ease;
}

.toggle-switch .slider::before {
    content: "";
    position: absolute;
    height: 24px;
    width: 24px;
    left: 2px;
    bottom: 2px;
    background-color: #ffffff;
    border-radius: 45px;
    transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .slider {
    background-color: #6366f1;
}

.toggle-switch input:checked + .slider::before {
    transform: translateX(24px);
}

Share this tool