CSS Animated border OTP form UI | HTML, CSS & JavaScript

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', sans-serif;
        }

body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #0f172a, #1e293b, #111827);
            overflow: hidden;
        }

/* Background Glow */

body::before {
            content: "";
            position: absolute;
            width: 450px;
            height: 450px;
            background: #3b82f6;
            filter: blur(180px);
            opacity: .4;
            animation: float 8s ease-in-out infinite;
        }

@keyframes float {
            50% {
                transform: translateY(-40px) translateX(30px);
            }
        }

/* Animated Border */

.border {
            position: relative;
            padding: 20px;
            animation: borderShape 6s linear infinite;
            background: linear-gradient(45deg,
                    #00d4ff,
                    #6d5dfc,
                    #ff0080,
                    #00d4ff);
            background-size: 300%;
        }

@keyframes borderShape {

0% {
                border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
                background-position: 0%;
            }

25% {
                border-radius: 65% 35% 30% 70% / 60% 30% 70% 40%;
                background-position: 100%;
            }

50% {
                border-radius: 30% 70% 60% 40% / 50% 70% 30% 50%;
                background-position: 0%;
            }

75% {
                border-radius: 55% 45% 70% 30% / 30% 60% 40% 70%;
                background-position: 100%;
            }

100% {
                border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
                background-position: 0%;
            }

}

/* Card */

.card {
            width: 420px;
            padding: 50px;
            margin: 20px;
            background: #0f172a;
            color: #fff;
            text-align: center;
            animation: borderShape 6s linear infinite;

}

.card h2 {
            font-size: 30px;
            margin-bottom: 10px;
        }

.card p {
            color: #94a3b8;
            font-size: 15px;
            margin-bottom: 35px;
        }

.otp {

display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 35px;

}

.otp input {

width: 58px;
            height: 65px;
            background: #1e293b;
            border: 2px solid rgba(255, 255, 255, .08);
            outline: none;
            color: white;
            font-size: 26px;
            font-weight: 700;
            text-align: center;
            border-radius: 16px;
            transition: .35s;

}

.otp input:focus {

border-color: #00d4ff;
            transform: translateY(-6px) scale(1.08);
            box-shadow:
                0 0 20px #00d4ff55,
                0 0 40px #00d4ff33;

}

button {

width: 100%;
            padding: 16px;
            border: none;
            cursor: pointer;
            font-size: 17px;
            font-weight: 600;
            border-radius: 15px;
            color: white;
            background: linear-gradient(135deg, #2563eb, #7c3aed);
            transition: .4s;

}

button:hover {

transform: translateY(-4px);
            box-shadow: 0 18px 35px rgba(59, 130, 246, .45);

}

.resend {

margin-top: 22px;
            color: #94a3b8;
            font-size: 14px;

}

.resend a {

color: #38bdf8;
            text-decoration: none;

}

- CSS Animated border OTP form UI

Live Preview