Neon Border Input

admin1234

Jan 30, 2026 6

Live Preview

Live Editor

<input class="neon-input" placeholder="Enter username">
.neon-input{
  width:280px;
  padding:16px;
  border-radius:14px;
  background:#0b0b0b;
  color:#fff;
  border:2px solid transparent;
  outline:none;
  background-image:
    linear-gradient(#0b0b0b,#0b0b0b),
    linear-gradient(120deg,#00e5ff,#8b5cf6,#ff00cc);
  background-origin:border-box;
  background-clip:padding-box,border-box;
  transition:.3s;
}
.neon-input:focus{
  box-shadow:0 0 25px rgba(139,92,246,.7);
}

Comments 0

Want to comment?

Please login or sign up to post comments.

No comments yet

Be the first to comment on this component!

Categories

Neon Border Input

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet