Glass Toggle
Frosted iOS-style toggle switch sitting over a vivid backdrop — the thumb is a brighter glass island inside the track.
The code
<div class="gm-toggle-bg">
<label class="gm-toggle">
<input type="checkbox" class="gm-toggle__input" checked />
<span class="gm-toggle__track">
<span class="gm-toggle__thumb"></span>
</span>
<span class="gm-toggle__label">Notifications</span>
</label>
</div> <div class="gm-toggle-bg">
<label class="gm-toggle">
<input type="checkbox" class="gm-toggle__input" checked />
<span class="gm-toggle__track">
<span class="gm-toggle__thumb"></span>
</span>
<span class="gm-toggle__label">Notifications</span>
</label>
</div>.gm-toggle-bg {
position: relative; padding: 32px 28px;
border-radius: 18px; overflow: hidden;
background:
radial-gradient(ellipse at 20% 30%, #f59e0b 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, #ec4899 0%, transparent 55%),
#2a0a1f;
}
.gm-toggle {
display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
}
.gm-toggle__input {
position: absolute; opacity: 0; pointer-events: none;
}
.gm-toggle__track {
position: relative; display: inline-block;
width: 48px; height: 28px;
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
transition: background 0.25s, border-color 0.25s;
}
.gm-toggle__thumb {
position: absolute; top: 2px; left: 2px;
width: 22px; height: 22px;
background: rgba(255, 255, 255, 0.85);
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
transition: left 0.25s cubic-bezier(.3, 1.3, .5, 1), background 0.25s;
}
.gm-toggle__input:checked + .gm-toggle__track {
background: rgba(34, 197, 94, 0.4);
border-color: rgba(34, 197, 94, 0.6);
}
.gm-toggle__input:checked + .gm-toggle__track .gm-toggle__thumb {
left: 22px;
background: #fff;
}
.gm-toggle__label {
font: 600 13px system-ui, sans-serif;
color: #fff;
} .gm-toggle-bg {
position: relative; padding: 32px 28px;
border-radius: 18px; overflow: hidden;
background:
radial-gradient(ellipse at 20% 30%, #f59e0b 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, #ec4899 0%, transparent 55%),
#2a0a1f;
}
.gm-toggle {
display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
}
.gm-toggle__input {
position: absolute; opacity: 0; pointer-events: none;
}
.gm-toggle__track {
position: relative; display: inline-block;
width: 48px; height: 28px;
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
transition: background 0.25s, border-color 0.25s;
}
.gm-toggle__thumb {
position: absolute; top: 2px; left: 2px;
width: 22px; height: 22px;
background: rgba(255, 255, 255, 0.85);
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
transition: left 0.25s cubic-bezier(.3, 1.3, .5, 1), background 0.25s;
}
.gm-toggle__input:checked + .gm-toggle__track {
background: rgba(34, 197, 94, 0.4);
border-color: rgba(34, 197, 94, 0.6);
}
.gm-toggle__input:checked + .gm-toggle__track .gm-toggle__thumb {
left: 22px;
background: #fff;
}
.gm-toggle__label {
font: 600 13px system-ui, sans-serif;
color: #fff;
}