Problem description

Given HTML markup using a <label> wrapper containing a checkbox input and two <span> elements for the track and thumb, write CSS to:

• Hide the default checkbox input.

• Style the track (.switch-track) as a pill-shaped, semi-transparent backdrop with blur.

• Style the thumb (.switch-thumb) as a circular handle that sits at the start of the track.

• Animate the thumb sliding to the opposite end when the checkbox is checked.

Goal

Write CSS rules utilizing custom properties, backdrop-filter, pseudo-elements, and the adjacent sibling selector to build a glassmorphic toggle switch with animated state transitions.

Constraints

• Use only CSS (no JavaScript).

• Implement state toggling via a hidden checkbox (.toggle-checkbox).

• Define --switch-width and --switch-height CSS variables on .switch for sizing.

• Track background should be rgba(255, 255, 255, 0.2); blur radius should be 8px.

• Thumb background should be rgba(255, 255, 255, 0.4); blur radius should be 4px.

• Transition duration should be 0.3s for both track background and thumb transform.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.