Electric Embossed OTP | HTML, CSS & JavaScript

<div class="electric-wrapper">
        <div class="otp-container">
            
            <div id="otp-form">
                <h2>Verify OTP</h2>
                <p>Enter the 4-digit security code</p>
                <div class="otp-inputs">
                    <input type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                    <input type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                    <input type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                    <input type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                </div>
                <button class="verify-btn" id="submit-btn">Verify Now</button>
            </div>

<div id="success-msg" class="success-overlay">
                <div class="check-icon">✓</div>
                <h2 style="color: var(--success-color);">Success!</h2>
                <p>Identity confirmed successfully.</p>
            </div>
        </div>
    </div>

:root {
            --bg-color: #e0e5ec;
            --electric-glow: #00f2ff;
            --success-color: #2ecc71;
            --emboss-light: #ffffff;
            --emboss-shadow: #a3b1c6;
            --text-color: #4a5568;
        }

body {
            background-color: var(--bg-color);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

/* Electric Border Wrapper */
        .electric-wrapper {
            position: relative;
            padding: 4px;
            border-radius: 24px;
            background: rgba(0, 0, 0, 0.05);
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

.electric-wrapper::before {
            content: "";
            position: absolute;
            width: 150%;
            height: 150%;
            background: conic-gradient(
                transparent, 
                var(--electric-glow), 
                transparent 30%
            );
            animation: rotate 2.5s linear infinite;
        }

/* Main Container */
        .otp-container {
            position: relative;
            background: var(--bg-color);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            z-index: 1;
            width: 320px;
        }

h2 { color: var(--text-color); margin-bottom: 8px; }
        p { color: #718096; font-size: 14px; margin-bottom: 24px; }

/* Embossed OTP Inputs */
        .otp-inputs {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }

.otp-inputs input {
            width: 55px;
            height: 65px;
            border: none;
            outline: none;
            background: var(--bg-color);
            border-radius: 12px;
            font-size: 28px;
            font-weight: bold;
            text-align: center;
            color: var(--text-color);
            /* Emboss effect */
            box-shadow: inset 6px 6px 12px var(--emboss-shadow), 
                        inset -6px -6px 12px var(--emboss-light);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

.otp-inputs input:focus {
            box-shadow: inset 2px 2px 5px var(--emboss-shadow), 
                        inset -2px -2px 5px var(--emboss-light),
                        0 0 12px var(--electric-glow);
            transform: scale(1.05);
        }

/* Verify Button */
        .verify-btn {
            width: 100%;
            padding: 14px;
            border: none;
            border-radius: 12px;
            background: var(--bg-color);
            color: var(--text-color);
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
            box-shadow: 6px 6px 12px var(--emboss-shadow), 
                       -6px -6px 12px var(--emboss-light);
            transition: all 0.2s ease;
        }

.verify-btn:active {
            box-shadow: inset 4px 4px 8px var(--emboss-shadow), 
                        inset -4px -4px 8px var(--emboss-light);
            transform: scale(0.98);
        }

/* Success Overlay */
        .success-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-color);
            border-radius: 20px;
            display: none; /* Hidden until success */
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10;
            animation: fadeIn 0.4s ease forwards;
        }

.check-icon {
            width: 70px;
            height: 70px;
            background: var(--success-color);
            color: white;
            border-radius: 50%;
            font-size: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            box-shadow: 0 0 20px rgba(46, 204, 113, 0.4);
            animation: scaleUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

/* Animations */
        @keyframes rotate {
            100% { transform: rotate(360deg); }
        }

@keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

@keyframes scaleUp {
            from { transform: scale(0); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

const inputs = document.querySelectorAll('.otp-inputs input');
        const submitBtn = document.getElementById('submit-btn');
        const successMsg = document.getElementById('success-msg');
        const wrapper = document.querySelector('.electric-wrapper');

// Handle auto-focus and backspace
        inputs.forEach((input, index) => {
            input.addEventListener('keyup', (e) => {
                if (e.key >= 0 && e.key <= 9) {
                    if (index < inputs.length - 1) {
                        inputs[index + 1].focus();
                    }
                } else if (e.key === 'Backspace') {
                    if (index > 0) {
                        inputs[index - 1].focus();
                    }
                }
            });
        });

// Handle submission
        submitBtn.addEventListener('click', () => {
            const code = Array.from(inputs).map(i => i.value).join('');
            
            if (code.length === 4) {
                // Show success UI
                successMsg.style.display = 'flex';
                
                // Change electric border color to success green
                wrapper.style.setProperty('--electric-glow', 'var(--success-color)');
            } else {
                // Flash red on wrapper for error
                wrapper.style.setProperty('--electric-glow', '#ff4757');
                setTimeout(() => {
                    wrapper.style.setProperty('--electric-glow', '#00f2ff');
                }, 1000);
            }
        });

- Electric Embossed OTP

Live Preview