toggleswitchdark-theme3d-effectinteractiveform-controlpremiumtexturedgradientsettings
Enhanced Dark Toggle Switch

3D переключатель темной темы с градиентом и текстурой. Идеален для UI тем и настроек. Интерактивный элемент управления.
Prompt

<div class="p-6 flex items-center justify-center min-h-screen">
  <div class="toggle-wrapper relative" style="display:flex;justify-content:center;align-items:center;position:relative;border-radius:.6em;padding:.15em;background-image:linear-gradient(to bottom,#171717,#1f1f1f,#262626);box-shadow:0 2px 4px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.02),inset 0 -1px 0 rgba(0,0,0,.3);font-size:1.5em;">
    <input class="toggle-checkbox focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400/60 rounded-md" type="checkbox" aria-label="Toggle" style="appearance:none;position:absolute;z-index:1;border-radius:inherit;width:100%;height:100%;font:inherit;opacity:0;cursor:pointer;" aria-pressed="false">
    <div class="toggle-container" style="display:flex;align-items:center;position:relative;border-radius:.45em;width:3em;height:1.5em;background-image:linear-gradient(to bottom,#1a1a1a,#262626,#2a2a2a);box-shadow:inset 0 0 .05em .1em rgba(255,255,255,.03),inset 0 .1em .2em rgba(0,0,0,.8),inset 0 -.05em .1em rgba(255,255,255,.01),inset 0 .05em .15em rgba(0,0,0,.9);border:1px solid rgba(0,0,0,.4);transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);">
      <div class="toggle-button" style="display:flex;justify-content:center;align-items:center;position:absolute;left:.08em;border-radius:.35em;width:1.34em;height:1.34em;background-image:linear-gradient(to bottom,#454545,#3a3a3a,#2f2f2f,#2a2a2a);box-shadow:inset 0 -.08em .08em .12em rgba(0,0,0,.4),inset 0 -.15em .08em rgba(0,0,0,.5),inset 0 .2em .08em rgba(255,255,255,.12),inset 0 .05em .03em rgba(255,255,255,.08),0 .15em .2em rgba(0,0,0,.85),0 .05em .08em rgba(0,0,0,.6);border:1px solid rgba(0,0,0,.6);transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);">
        <div class="toggle-button-circles-container" style="display:grid;grid-template-columns:repeat(3,min-content);gap:.15em;position:absolute;margin:0 auto;">
          <div class="toggle-button-circle" style="border-radius:50%;width:.08em;height:.08em;background-image:radial-gradient(circle at 30% 20%,rgba(255,255,255,.15),rgba(255,255,255,.08) 30%,#8a8a8a 60%,#5a5a5a);box-shadow:inset 0 .02em .01em rgba(255,255,255,.2),inset 0 -.02em .01em rgba(0,0,0,.4),0 .02em .02em rgba(0,0,0,.3);"></div>
          <div class="toggle-button-circle" style="border-radius:50%;width:.08em;height:.08em;background-image:radial-gradient(circle at 30% 20%,rgba(255,255,255,.15),rgba(255,255,255,.08) 30%,#8a8a8a 60%,#5a5a5a);box-shadow:inset 0 .02em .01em rgba(255,255,255,.2),inset 0 -.02em .01em rgba(0,0,0,.4),0 .02em .02em rgba(0,0,0,.3);"></div>
          <div class="toggle-button-circle" style="border-radius:50%;width:.08em;height:.08em;background-image:radial-gradient(circle at 30% 20%,rgba(255,255,255,.15),rgba(255,255,255,.08) 30%,#8a8a8a 60%,#5a5a5a);box-shadow:inset 0 .02em .01em rgba(255,255,255,.2),inset 0 -.02em .01em rgba(0,0,0,.4),0 .02em .02em rgba(0,0,0,.3);"></div>
          <div class="toggle-button-circle" style="border-radius:50%;width:.08em;height:.08em;background-image:radial-gradient(circle at 30% 20%,rgba(255,255,255,.15),rgba(255,255,255,.08) 30%,#8a8a8a 60%,#5a5a5a);box-shadow:inset 0 .02em .01em rgba(255,255,255,.2),inset 0 -.02em .01em rgba(0,0,0,.4),0 .02em .02em rgba(0,0,0,.3);"></div>
          <div class="toggle-button-circle" style="border-radius:50%;width:.08em;height:.08em;background-image:radial-gradient(circle at 30% 20%,rgba(255,255,255,.15),rgba(255,255,255,.08) 30%,#8a8a8a 60%,#5a5a5a);box-shadow:inset 0 .02em .01em rgba(255,255,255,.2),inset 0 -.02em .01em rgba(0,0,0,.4),0 .02em .02em rgba(0,0,0,.3);"></div>
          <div class="toggle-button-circle" style="border-radius:50%;width:.08em;height:.08em;background-image:radial-gradient(circle at 30% 20%,rgba(255,255,255,.15),rgba(255,255,255,.08) 30%,#8a8a8a 60%,#5a5a5a);box-shadow:inset 0 .02em .01em rgba(255,255,255,.2),inset 0 -.02em .01em rgba(0,0,0,.4),0 .02em .02em rgba(0,0,0,.3);"></div>
          <div class="toggle-button-circle" style="border-radius:50%;width:.08em;height:.08em;background-image:radial-gradient(circle at 30% 20%,rgba(255,255,255,.15),rgba(255,255,255,.08) 30%,#8a8a8a 60%,#5a5a5a);box-shadow:inset 0 .02em .01em rgba(255,255,255,.2),inset 0 -.02em .01em rgba(0,0,0,.4),0 .02em .02em rgba(0,0,0,.3);"></div>
          <div class="toggle-button-circle" style="border-radius:50%;width:.08em;height:.08em;background-image:radial-gradient(circle at 30% 20%,rgba(255,255,255,.15),rgba(255,255,255,.08) 30%,#8a8a8a 60%,#5a5a5a);box-shadow:inset 0 .02em .01em rgba(255,255,255,.2),inset 0 -.02em .01em rgba(0,0,0,.4),0 .02em .02em rgba(0,0,0,.3);"></div>
          <div class="toggle-button-circle" style="border-radius:50%;width:.08em;height:.08em;background-image:radial-gradient(circle at 30% 20%,rgba(255,255,255,.15),rgba(255,255,255,.08) 30%,#8a8a8a 60%,#5a5a5a);box-shadow:inset 0 .02em .01em rgba(255,255,255,.2),inset 0 -.02em .01em rgba(0,0,0,.4),0 .02em .02em rgba(0,0,0,.3);"></div>
          <div class="toggle-button-circle" style="border-radius:50%;width:.08em;height:.08em;background-image:radial-gradient(circle at 30% 20%,rgba(255,255,255,.15),rgba(255,255,255,.08) 30%,#8a8a8a 60%,#5a5a5a);box-shadow:inset 0 .02em .01em rgba(255,255,255,.2),inset 0 -.02em .01em rgba(0,0,0,.4),0 .02em .02em rgba(0,0,0,.3);"></div>
          <div class="toggle-button-circle" style="border-radius:50%;width:.08em;height:.08em;background-image:radial-gradient(circle at 30% 20%,rgba(255,255,255,.15),rgba(255,255,255,.08) 30%,#8a8a8a 60%,#5a5a5a);box-shadow:inset 0 .02em .01em rgba(255,255,255,.2),inset 0 -.02em .01em rgba(0,0,0,.4),0 .02em .02em rgba(0,0,0,.3);"></div>
          <div class="toggle-button-circle" style="border-radius:50%;width:.08em;height:.08em;background-image:radial-gradient(circle at 30% 20%,rgba(255,255,255,.15),rgba(255,255,255,.08) 30%,#8a8a8a 60%,#5a5a5a);box-shadow:inset 0 .02em .01em rgba(255,255,255,.2),inset 0 -.02em .01em rgba(0,0,0,.4),0 .02em .02em rgba(0,0,0,.3);"></div>
        </div>
      </div>
    </div>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded',function(){const checkbox=document.querySelector('.toggle-checkbox');const container=document.querySelector('.toggle-container');const button=document.querySelector('.toggle-button');const OFF_BG='linear-gradient(to bottom,#1a1a1a,#262626,#2a2a2a)';const ON_BG='linear-gradient(to bottom,#1f2937,#374151,#4b5563)';const OFF_LEFT='.08em';const ON_LEFT='1.58em';function applyState(){const checked=checkbox.checked;container.style.backgroundImage=checked?ON_BG:OFF_BG;button.style.left=checked?ON_LEFT:OFF_LEFT;checkbox.setAttribute('aria-pressed',checked?'true':'false');if(checked){button.style.boxShadow='inset 0 -.08em .08em .12em rgba(0,0,0,.3),inset 0 -.15em .08em rgba(0,0,0,.4),inset 0 .2em .08em rgba(255,255,255,.15),inset 0 .05em .03em rgba(255,255,255,.1),0 .12em .18em rgba(0,0,0,.7),0 .04em .06em rgba(0,0,0,.5)';}else{button.style.boxShadow='inset 0 -.08em .08em .12em rgba(0,0,0,.4),inset 0 -.15em .08em rgba(0,0,0,.5),inset 0 .2em .08em rgba(255,255,255,.12),inset 0 .05em .03em rgba(255,255,255,.08),0 .15em .2em rgba(0,0,0,.85),0 .05em .08em rgba(0,0,0,.6)';}}checkbox.addEventListener('change',applyState);applyState();});
  </script>
</div>
All Prompts