Day / Night Switch
A sun-to-moon toggle that reveals stars and flips the whole background between day and night.
<label class="dn"><input type="checkbox" id="dnCb"><span class="dn-t"><span class="dn-star s1"></span><span class="dn-star s2"></span><span class="dn-star s3"></span><span class="dn-k"></span></span></label>body{background:#e8edf5;transition:background .5s}
body:has(#dnCb:checked){background:#0d1426}
.dn input{display:none}
.dn-t{display:block;width:88px;height:40px;border-radius:999px;background:#7cc4ff;position:relative;overflow:hidden;transition:background .5s;cursor:pointer}
.dn input:checked+.dn-t{background:#1a2540}
.dn-k{position:absolute;top:5px;left:5px;width:30px;height:30px;border-radius:50%;background:#ffd84d;box-shadow:0 0 12px #ffd84d;transition:.5s}
.dn input:checked+.dn-t .dn-k{left:53px;background:#dfe6f5;box-shadow:inset -6px -2px 0 #b9c4dd}
.dn-star{position:absolute;background:#fff;border-radius:50%;width:3px;height:3px;opacity:0;transition:opacity .5s}
.s1{top:10px;left:14px}.s2{top:22px;left:24px}.s3{top:8px;left:30px}
.dn input:checked+.dn-t .dn-star{opacity:1}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.