OTP input UI

admin1234
Jan 30, 2026 2
Live Preview

Live Editor

<div class="otp-box">
  <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,#2563eb,#020617);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

/* container */
.otp-box{
  padding:30px 36px;
  border-radius:22px;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(16px);
  box-shadow:
    0 30px 80px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.35);
  text-align:center;
  color:#fff;
}

.otp-box h2{
  margin:0 0 18px;
  font-weight:600;
}

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

.otp input{
  width:52px;
  height:60px;
  border-radius:14px;
  border:none;
  outline:none;
  text-align:center;
  font-size:26px;
  font-weight:600;
  color:#fff;
  background:rgba(0,0,0,.35);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  transition:.25s;
}

.otp input:focus{
  background:rgba(0,0,0,.55);
  box-shadow:
    0 0 0 2px #60a5fa,
    0 0 20px rgba(96,165,250,.7);
  transform:translateY(-2px);
}

/* button */
button{
  margin-top:24px;
  width:100%;
  padding:14px;
  border-radius:999px;
  border:none;
  background:#fff;
  color:#000;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
}
Categories

OTP input UI

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
