Neon OTP UI

admin1234
Jan 30, 2026 2
Live Preview

Live Editor

<div class="otp-wrap">
  <h2>Enter OTP</h2>

  <div class="otp">
    <input maxlength="1" inputmode="numeric">
    <input maxlength="1" inputmode="numeric">
    <input maxlength="1" inputmode="numeric">
    <input maxlength="1" inputmode="numeric">
   
  </div>

  <button>Verify</button>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:radial-gradient(circle at top,#020617,#000);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

/* container */
.otp-wrap{
  padding:34px 40px;
  border-radius:24px;
  background:#020617;
  box-shadow:
    0 0 60px rgba(0,229,255,.25),
    inset 0 0 0 1px rgba(255,255,255,.08);
  text-align:center;
  color:#e5faff;
}

/* title */
.otp-wrap h2{
  margin:0 0 20px;
  font-weight:600;
  letter-spacing:.4px;
}

/* inputs */
.otp{
  display:flex;
  gap:14px;
  justify-content:center;
}

.otp input{
  width:54px;
  height:62px;
  border-radius:14px;
  border:2px solid #00e5ff;
  background:#000;
  color:#00e5ff;
  font-size:26px;
  font-weight:600;
  text-align:center;
  outline:none;
  box-shadow:
    0 0 12px rgba(0,229,255,.5),
    inset 0 0 12px rgba(0,229,255,.35);
  transition:.25s;
}

/* focus glow */
.otp input:focus{
  border-color:#8b5cf6;
  color:#fff;
  box-shadow:
    0 0 18px rgba(139,92,246,.9),
    inset 0 0 14px rgba(139,92,246,.5);
  transform:translateY(-3px);
}

/* button */
button{
  margin-top:26px;
  width:100%;
  padding:14px;
  border-radius:999px;
  border:none;
  background:linear-gradient(90deg,#00e5ff,#8b5cf6);
  color:#000;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 0 25px rgba(139,92,246,.7);
  transition:.3s;
}

button:hover{
  transform:translateY(-3px);
  box-shadow:0 0 40px rgba(139,92,246,1);
}
Categories

Neon OTP UI

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
