WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Emoji Toggle
1870
Andev.web
Open In Editor
Publish Your Code
Recommended
10 July 2023
CSS Dark Mode Toggle
24 July 2025
CSS Toggle Switch HTML Code
23 August 2025
HTML Login Form with Password Toggle
HTML
Copy
Andev Web
Power
CSS
Copy
* { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),10%,90%); --fg: hsl(var(--hue),10%,10%); --trans-dur: 0.5s; --trans-timing1: cubic-bezier(0.65,0,0.35,1); --trans-timing2: cubic-bezier(0.65,0,0.35,1.5); font-size: calc(56px + (120 - 56) * (100vw - 280px) / (3840 - 280)); } body, input { color: var(--fg); font: 1em/1.5 sans-serif; transition: background-color var(--trans-dur) var(--trans-timing1), color var(--trans-dur) var(--trans-timing1); } body { background-color: var(--bg); display: flex; height: 100vh; } .switch { display: flex; margin: auto; } .switch__emoji { box-shadow: 0.25em 0.25em 0.125em rgba(0, 0, 0, 0.3); overflow: hidden; pointer-events: none; top: 0.25em; left: 0.25em; width: 1em; height: 1em; } [dir=rtl] .switch__emoji { right: 0.25em; left: auto; } .switch__emoji, .switch__emoji:before, .switch__emoji:after, .switch__emoji-eye, .switch__emoji-mouth, .switch__emoji-face { display: block; position: absolute; } .switch__emoji, .switch__emoji:before, .switch__emoji:after, .switch__emoji-eye, .switch__emoji-mouth { border-radius: 50%; } .switch__emoji:before, .switch__emoji:after { content: ""; width: 100%; height: 100%; transform: translateZ(0); } .switch__emoji:before { background-color: #f2c40d; box-shadow: -0.25em -0.25em 0.25em #c29d0a inset, 0.1875em 0.1875em 0.25em #f9e286 inset; } .switch__emoji:after { box-shadow: 0 0 0.125em 0.0625em rgba(245, 208, 61, 0.5) inset; } .switch__emoji, .switch__emoji-face { transform-style: preserve-3d; transition: transform var(--trans-dur) var(--trans-timing2); } .switch__emoji-eye, .switch__emoji-mouth { backface-visibility: hidden; } .switch__emoji-eye { border: 0.0625em solid hsl(var(--hue), 10%, 10%); border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; top: 50%; left: 50%; width: 0.25em; height: 0.25em; transform: translate(-50%, -50%) rotateY(-22.5deg) translateZ(0.5em) rotateZ(45deg); } .switch__emoji-eye + .switch__emoji-eye { transform: translate(-50%, -50%) rotateY(22.5deg) translateZ(0.5em) rotateZ(45deg); } .switch__emoji-mouth { background-image: radial-gradient(100% 100% at 50% 100%, #f2180d 20%, #f5463d 33%, rgba(245, 70, 61, 0) 35%), radial-gradient(100% 100% at 75% 113%, black 26%, rgba(0, 0, 0, 0) 35%), linear-gradient(rgba(0, 0, 0, 0) 50%, black 50% 55%, hsl(var(--hue), 10%, 10%) 65%); top: 50%; left: 50%; width: 0.5em; height: 0.5em; transform: translate(-50%, -50%) rotateX(-15deg) translateZ(0.5em); } .switch__emoji-face { top: 0; left: 0; width: 100%; height: 100%; transform: rotateY(0); } .switch__emoji-face + .switch__emoji-face { transform: rotateY(-180deg); } .switch__emoji-face--sad .switch__emoji-eye { background-color: hsl(var(--hue), 10%, 10%); border: 0; width: 0.1875em; height: 0.1875em; } .switch__emoji-face--sad .switch__emoji-mouth { background-image: none; border: 0.0625em solid transparent; border-top-color: hsl(var(--hue), 10%, 10%); transform: translate(-50%, 0) rotateX(-20deg) translateZ(0.5em); } .switch__input, .switch__label { -webkit-tap-highlight-color: transparent; } .switch__input { background-color: hsl(var(--hue), 10%, 80%); border-radius: 0.75em; box-shadow: 0.0625em 0.0625em 0.0625em white inset, -0.0625em -0.0625em 0.0625em hsl(var(--hue), 10%, 80%) inset, 0 0 0 0.125em hsl(var(--hue), 10%, 90%) inset, 0.25em 0.25em 0.125em rgba(0, 0, 0, 0.3) inset, 0.0625em 0.0625em 0.0625em rgba(0, 0, 0, 0.3); cursor: pointer; display: block; width: 2.5em; height: 1.5em; -webkit-appearance: none; appearance: none; transition: background-color var(--trans-dur) var(--trans-timing1), box-shadow var(--trans-dur) var(--trans-timing1); } .switch__input:checked { background-color: #0ac213; } .switch__input:checked + .switch__emoji { transform: translateX(100%); } [dir=rtl] .switch__input:checked + .switch__emoji { transform: translateX(-100%); } .switch__input:checked + .switch__emoji .switch__emoji-face { transform: rotateY(179.99deg); } [dir=rtl] .switch__input:checked + .switch__emoji .switch__emoji-face { transform: rotateY(-179.99deg); } .switch__input:checked + .switch__emoji .switch__emoji-face + .switch__emoji-face { transform: rotateY(0); } [dir=rtl] .switch__input:checked + .switch__emoji .switch__emoji-face + .switch__emoji-face { transform: rotateY(-360deg); } .switch__label, .switch__wrapper { display: block; } .switch__label { margin-inline-start: 0.5em; overflow: hidden; position: absolute; width: 1px; height: 1px; } .switch__wrapper { position: relative; } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),10%,10%); --fg: hsl(var(--hue),10%,90%); } .switch__input { background-color: hsl(var(--hue), 10%, 20%); box-shadow: 0.0625em 0.0625em 0.0625em hsl(var(--hue), 10%, 25%) inset, -0.0625em -0.0625em 0.0625em hsl(var(--hue), 10%, 20%) inset, 0 0 0 0.125em hsl(var(--hue), 10%, 30%) inset, 0.25em 0.25em 0.125em rgba(0, 0, 0, 0.3) inset, 0.0625em 0.0625em 0.0625em rgba(0, 0, 0, 0.3); } }
JS
Copy