Neumorphism Checkbox On off by Editorial Staff Output View Horizontal Vertical HTML CSS JS Tidy <input type="checkbox"> HTML CSS JS Tidy body { background-color: #ececec; padding: 0px; margin: 0px; } input[type="checkbox"] { width: 200px; height: 200px; -webkit-appearance: none; /* show none */ box-shadow: -10px -10px 15px rgba(255, 255, 255, 0.5), 10px 10px 15px rgba(70, 70, 70, 0.15); position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; border-radius: 50%; border: solid 8px #ececec; outline: none; display: flex; justify-content: center; align-items: center; cursor: pointer; } input[type="checkbox"]::after { content: '✰'; color: #000; font-size: 5rem; } input[type="checkbox"]:checked { box-shadow: -10px -10px 15px rgba(255, 255, 255, 0.5), 10px 10px 15px rgba(70, 70, 70, 0.15), inset -10px -10px 15px rgba(255, 255, 255, 0.5), inset 10px 10px 15px rgba(70, 70, 70, 0.15); } input[type="checkbox"]:checked::after { color: #FF5C58; } HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Neumorphism Checkbox On off code snippets. Catagory CSS Tags Effect Neumorphism Resource Add External Stylesheets and Script
