1 
2<div class="container">
3<label class="switch">
4  <input class="togglesw" type="checkbox" checked="">
5  <div class="indicator left"></div>
6  <div class="indicator right"></div>
7  <div class="button"></div>
8</label>
9</div>          

  1 
  2.container {
  3  display: flex;
  4  align-items: center;
  5  justify-content: center;
  6  --hue: 220deg;
  7  --width: 15rem;
  8  --accent-hue: 22deg;
  9  --duration: 0.6s;
 10  --easing: cubic-bezier(1, 0, 1, 1);
 11}
 12 
 13.togglesw {
 14  display: none;
 15}
 16 
 17.switch {
 18  --shadow-offset: calc(var(--width) / 20);
 19  position: relative;
 20  cursor: pointer;
 21  display: flex;
 22  align-items: center;
 23  width: var(--width);
 24  height: calc(var(--width) / 2.5);
 25  border-radius: var(--width);
 26  box-shadow: inset 10px 10px 10px hsl(var(--hue) 20% 80%),
 27    inset -10px -10px 10px hsl(var(--hue) 20% 93%);
 28}
 29 
 30.indicator {
 31  content: '';
 32  position: absolute;
 33  width: 40%;
 34  height: 60%;
 35  transition: all var(--duration) var(--easing);
 36  box-shadow: inset 0 0 2px hsl(var(--hue) 20% 15% / 60%),
 37    inset 0 0 3px 2px hsl(var(--hue) 20% 15% / 60%),
 38    inset 0 0 5px 2px hsl(var(--hue) 20% 45% / 60%);
 39}
 40 
 41.indicator.left {
 42  --hue: var(--accent-hue);
 43  overflow: hidden;
 44  left: 10%;
 45  border-radius: 100px 0 0 100px;
 46  background: linear-gradient(180deg, hsl(calc(var(--accent-hue) + 20deg) 95% 80%) 10%, hsl(calc(var(--accent-hue) + 20deg) 100% 60%) 30%, hsl(var(--accent-hue) 90% 50%) 60%, hsl(var(--accent-hue) 90% 60%) 75%, hsl(var(--accent-hue) 90% 50%));
 47}
 48 
 49.indicator.left::after {
 50  content: '';
 51  position: absolute;
 52  opacity: 0.6;
 53  width: 100%;
 54  height: 100%;
 55}
 56 
 57.indicator.right {
 58  right: 10%;
 59  border-radius: 0 100px 100px 0;
 60  background-image: linear-gradient(180deg, hsl(var(--hue) 20% 95%), hsl(var(--hue) 20% 65%) 60%, hsl(var(--hue) 20% 70%) 70%, hsl(var(--hue) 20% 65%));
 61}
 62 
 63.button {
 64  position: absolute;
 65  z-index: 1;
 66  width: 55%;
 67  height: 80%;
 68  left: 5%;
 69  border-radius: 100px;
 70  background-image: linear-gradient(160deg, hsl(var(--hue) 20% 95%) 40%, hsl(var(--hue) 20% 65%) 70%);
 71  transition: all var(--duration) var(--easing);
 72  box-shadow: 2px 2px 3px hsl(var(--hue) 18% 50% / 80%),
 73    2px 2px 6px hsl(var(--hue) 18% 50% / 40%),
 74    10px 20px 10px hsl(var(--hue) 18% 50% / 40%),
 75    20px 30px 30px hsl(var(--hue) 18% 50% / 60%);
 76}
 77 
 78.button::before,
 79.button::after {
 80  content: '';
 81  position: absolute;
 82  top: 10%;
 83  width: 41%;
 84  height: 80%;
 85  border-radius: 100%;
 86}
 87 
 88.button::before {
 89  left: 5%;
 90  box-shadow: inset 1px 1px 2px hsl(var(--hue) 20% 85%);
 91  background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 85%) 80%);
 92}
 93 
 94.button::after {
 95  right: 5%;
 96  box-shadow: inset 1px 1px 3px hsl(var(--hue) 20% 70%);
 97  background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 75%) 80%);
 98}
 99 
100.togglesw:checked ~ .button {
101  left: 40%;
102}
103 
104.togglesw:not(:checked) ~ .indicator.left,
105.togglesw:checked ~ .indicator.right {
106  box-shadow: inset 0 0 5px hsl(var(--hue) 20% 15% / 100%),
107    inset 20px 20px 10px hsl(var(--hue) 20% 15% / 100%),
108    inset 20px 20px 15px hsl(var(--hue) 20% 45% / 100%);
109}