CSS Flip Switch Generator

Today

Build accessible switches with independent track, thumb, labels, states and transitions

State

Checked

Labels

Off label

On label

Track

Track width72px

Track height38px

Track radius19px

Border1px

Thumb

Thumb size30px

Thumb offset4px

Transition0.25s

Colors

Inactive

Active

Thumb

CSS

.flip-switch {
    --track: #353542;
    --active: #8b5cf6;
    position: relative;
    display: inline-flex;
    width: 72px;
    height: 38px;
    overflow: hidden;
    cursor: pointer;
}

.flip-switch input {
    position: absolute;
    opacity: 0;
}

.flip-switch__track {
    width: 100%;
    height: 100%;
    border: 1px solid color-mix(in srgb, var(--track) 75%, white);
    border-radius: 19px;
    background: var(--track);
    transition: 0.25s ease;
}

.flip-switch__thumb {
    position: absolute;
    left: 4px;
    top: 50%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    transform: translateY(-50%);
    transition: 0.25s cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 3px 10px rgb(0 0 0 / .3);
}

.flip-switch input:checked ~ .flip-switch__track {
    background: var(--active);
}

.flip-switch input:checked ~ .flip-switch__thumb {
    transform: translate(34px, -50%);
}

.flip-switch__label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgb(255 255 255 / .72);
    font: 700 9px/1 sans-serif;
    pointer-events: none;
}

.flip-switch__label--off {
    left: 12%;
}

.flip-switch__label--on {
    right: 12%;
}

HTML

Just click on the desired preset

Compact Pill

Compact Square

Ios Light

Ios Dark

Android Mint

Android Ocean

Neon Violet

Neon Cyan

Labeled Wide

Labeled Compact

Feedback

Utility Lab

Utility Lab

CSS Flip Switch Generator