Toggle Switch

rohit325
Feb 04, 2026 12
Live Preview

Live Editor

<div class="container">        
        <div class="toggle-wrapper">
            <input type="checkbox" id="toggle" class="toggle-checkbox">
            <label for="toggle" class="toggle-label"></label>
            <div class="circle-decoration circle-1"></div>
            <div class="circle-decoration circle-2"></div>
            <div class="status-text">OFF</div>
        </div>
    </div>
    * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #0f0f23;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        }

        .container {
            text-align: center;
        }

      

        /* Toggle Container */
        .toggle-wrapper {
            position: relative;
            display: inline-block;
        }

        .toggle-checkbox {
            display: none;
        }

        .toggle-label {
            display: block;
            width: 100px;
            height: 50px;
            background: #1a1a2e;
            border-radius: 50px;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 
                inset 0 2px 8px rgba(0, 0, 0, 0.5),
                0 4px 12px rgba(0, 0, 0, 0.3);
        }

        /* The sliding circle */
        .toggle-label::before {
            content: '';
            position: absolute;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            top: 4px;
            left: 4px;
            background: linear-gradient(145deg, #e0e0e0, #a0a0a0);
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            box-shadow: 
                0 2px 6px rgba(0, 0, 0, 0.4),
                inset 0 1px 2px rgba(255, 255, 255, 0.3);
        }

        /* Inner glow effect */
        .toggle-label::after {
            content: '';
            position: absolute;
            width: 0;
            height: 100%;
            border-radius: 50px;
            top: 0;
            left: 0;
            background: linear-gradient(90deg, #00d4ff, #0099ff);
            transition: all 0.4s ease;
            z-index: 0;
        }

        /* Checked state - background fills */
        .toggle-checkbox:checked + .toggle-label::after {
            width: 100%;
        }

        /* Checked state - circle moves and changes color */
        .toggle-checkbox:checked + .toggle-label::before {
            left: 54px;
            background: linear-gradient(145deg, #ffffff, #f0f0f0);
            box-shadow: 
                0 2px 10px rgba(0, 212, 255, 0.6),
                0 0 20px rgba(0, 212, 255, 0.4),
                inset 0 1px 2px rgba(255, 255, 255, 0.5);
        }

        /* Checked state - outer glow */
        .toggle-checkbox:checked + .toggle-label {
            box-shadow: 
                inset 0 2px 8px rgba(0, 100, 255, 0.3),
                0 0 25px rgba(0, 212, 255, 0.4),
                0 4px 12px rgba(0, 0, 0, 0.3);
        }

        /* Hover effect */
        .toggle-label:hover {
            transform: scale(1.02);
        }

        .toggle-label:active {
            transform: scale(0.98);
        }

        /* Status text */
        .status-text {
            margin-top: 40px;
            color: #666;
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 1px;
            transition: all 0.3s ease;
        }

        .toggle-checkbox:checked ~ .status-text {
            color: #00d4ff;
            text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
        }

        /* Decorative circles */
        .circle-decoration {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            pointer-events: none;
            z-index: -1;
        }

        .circle-1 {
            top: -75px;
            left: -50px;
            background: radial-gradient(circle, rgba(0, 212, 255, 0.1), transparent);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .circle-2 {
            bottom: -75px;
            right: -50px;
            background: radial-gradient(circle, rgba(0, 153, 255, 0.1), transparent);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .toggle-checkbox:checked ~ .circle-1,
        .toggle-checkbox:checked ~ .circle-2 {
            opacity: 1;
        }
    const toggle = document.getElementById('toggle');
        const statusText = document.querySelector('.status-text');

        toggle.addEventListener('change', function() {
            statusText.textContent = this.checked ? 'ON' : 'OFF';
        });
Categories

Toggle Switch

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
