<div class="neumorphic-container">
  <input type="text" class="neu-input" placeholder="eg: https://weijunext.com">
  <button class="neu-button">Click Me</button>

  <label class="neu-switch">
    <input type="checkbox">
    <span class="slider round"></span>
  </label>

</div>
body {
  font-family: Arial, sans-serif;
  background-color: #e0e5ec;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.neumorphic-container {
  padding: 20px;
  border-radius: 20px;
  background: #e0e5ec;
  box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
}

.neu-input {
  border: none;
  outline: none;
  border-radius: 20px;
  padding: 10px 15px;
  width: 80%;
  box-shadow: inset 8px 8px 15px #a3b1c6, inset -8px -8px 15px #ffffff;
  margin-bottom: 20px;
}

.neu-button {
  border: none;
  outline: none;
  border-radius: 20px;
  padding: 10px 15px;
  color: #333;
  background: #e0e5ec;
  box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
  cursor: pointer;
  margin-bottom: 20px;
}

.neu-button:active {
  box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
}

.neu-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.neu-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 2px 2px 5px #a3b1c6, -2px -2px 5px #ffffff;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.