Neumorphic Toggle
A soft neumorphic (soft-UI) toggle switch with inset shadows and a gradient on state.
<label class="neu"><input type="checkbox" id="neuCb"><span class="neu-track"><span class="neu-knob"></span></span></label>body{background:#e0e5ec}
.neu{cursor:pointer}
.neu input{display:none}
.neu-track{display:block;width:80px;height:40px;border-radius:999px;background:#e0e5ec;box-shadow:inset 4px 4px 8px #bcc2cc,inset -4px -4px 8px #fff;position:relative;transition:.3s}
.neu-knob{position:absolute;top:5px;left:5px;width:30px;height:30px;border-radius:50%;background:#e0e5ec;box-shadow:3px 3px 6px #bcc2cc,-3px -3px 6px #fff;transition:.3s}
.neu input:checked+.neu-track .neu-knob{left:45px;background:linear-gradient(135deg,#ff7a18,#ff477e);box-shadow:none}Free to use.This snippet is plain HTML, CSS and JavaScript with no dependencies. Copy any file, or download the whole thing as a single ready-to-open .html page.