Industrial 3D Switch Toggle Lever

Colours in this gradient

• #090d16
• #ef4444
• #10b981
• #ffffff

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="lever-stage">
  <div class="lever-panel" id="leverPanel">
    <div class="lp-screws"><span>+</span><span>+</span><span>+</span><span>+</span></div>
    <div class="lp-label" id="leverStateLabel">SYSTEM DISARMED</div>
    <div class="lever-assembly" id="leverAssembly">
      <div class="lever-base"></div>
      <div class="lever-shaft">
        <div class="lever-tip"></div>
      </div>
    </div>
    <div class="lp-led" id="leverLed"></div>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same 3d scene, then ask it to adapt the colours, text or framework to your project.

Create a physical industrial 3D toggle switch lever in HTML, CSS and vanilla JavaScript.

Requirements:
- Metallic faceplate angled in 3D perspective space (rotateX(20deg)).
- Cylindrical lever handle flipping up and down with spring cubic-bezier timing.
- Indicator tip and LED swapping from red (#ef4444) to green (#10b981) on activation.
- Click listener toggling state.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1. 1

   Build faceplate with metallic gradients and inset shadows.

2. 2

   Anchor lever handle rotation to its base using transform-origin: 50% 100%.

3. 3

   Toggle .is-active class on click to rotate handle and update LED status.

Customisation tips

• Using rotateX(-35deg) to rotateX(35deg) replicates the satisfying physical arc of an industrial toggle switch.

More 3d scenes