Glowing Login Form Animation | HTML, CSS & JavaScript

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

body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: radial-gradient(circle at 20% 30%, #16213e, transparent 35%), radial-gradient(circle at 80% 70%, #1b0635, transparent 35%), #050509;
            overflow: hidden
        }

body::after,
        body::before {
            content: "";
            position: absolute;
            width: 350px;
            height: 350px;
            border-radius: 50%;
            filter: blur(100px);
            opacity: .45;
            animation: moveGlow 8s infinite alternate ease-in-out
        }

body::before {
            background: #00eaff;
            top: -100px;
            left: -100px
        }

body::after {
            background: #8a00ff;
            right: -100px;
            bottom: -100px;
            animation-delay: 2s
        }

@keyframes moveGlow {
            0% {
                transform: translate(0, 0) scale(1)
            }

100% {
                transform: translate(100px, 80px) scale(1.3)
            }
        }

.login-box {
            position: relative;
            width: 380px;
            padding: 45px 40px;
            background: rgba(10, 10, 20, .75);
            border: 1px solid rgba(0, 238, 255, .5);
            border-radius: 25px;
            backdrop-filter: blur(20px);
            box-shadow: 0 0 20px rgba(0, 238, 255, .3), 0 0 60px rgba(0, 238, 255, .15), inset 0 0 30px rgba(0, 238, 255, .05);
            z-index: 2;
            overflow: hidden
        }

.login-box::before {
            content: "";
            position: absolute;
            inset: -2px;
            background: conic-gradient(transparent, #00eaff, transparent, #8a00ff, transparent);
            animation: rotateBorder 4s linear infinite;
            z-index: -2
        }

.login-box::after {
            content: "";
            position: absolute;
            inset: 2px;
            background: #0a0a14;
            border-radius: 23px;
            z-index: -1
        }

@keyframes rotateBorder {
            100% {
                transform: rotate(360deg)
            }
        }

.login-box h2 {
            text-align: center;
            color: #fff;
            font-size: 32px;
            letter-spacing: 3px;
            margin-bottom: 35px;
            text-shadow: 0 0 5px #00eaff, 0 0 15px #00eaff, 0 0 30px #00eaff
        }

.input-box {
            position: relative;
            margin-bottom: 30px
        }

.input-box input {
            width: 100%;
            height: 55px;
            padding: 0 18px;
            background: 0 0;
            border: 1px solid rgba(255, 255, 255, .25);
            border-radius: 10px;
            outline: 0;
            color: #fff;
            font-size: 16px;
            transition: .4s
        }

.input-box input:focus {
            border-color: #00eaff;
            box-shadow: 0 0 8px #00eaff, 0 0 20px rgba(0, 234, 255, .5);
            background: rgba(0, 234, 255, .03)
        }

.input-box label {
            position: absolute;
            left: 18px;
            top: 17px;
            color: #aaa;
            pointer-events: none;
            transition: .3s;
            background: #0a0a14;
            padding: 0 5px
        }

.input-box input:focus~label,
        .input-box input:valid~label {
            top: -9px;
            color: #00eaff;
            font-size: 13px;
            text-shadow: 0 0 8px #00eaff
        }

.options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            font-size: 13px;
            color: #aaa
        }

.options label {
            cursor: pointer
        }

.options input {
            accent-color: #00eaff
        }

.options a {
            color: #00eaff;
            text-decoration: none;
            transition: .3s
        }

.options a:hover {
            text-shadow: 0 0 10px #00eaff
        }

.login-btn {
            position: relative;
            width: 100%;
            height: 55px;
            border: none;
            border-radius: 10px;
            background: linear-gradient(90deg, #00eaff, #7b00ff, #00eaff);
            background-size: 200%;
            color: #fff;
            font-size: 17px;
            font-weight: 700;
            letter-spacing: 2px;
            cursor: pointer;
            overflow: hidden;
            transition: .4s;
            animation: buttonGradient 4s linear infinite
        }

@keyframes buttonGradient {
            0% {
                background-position: 0
            }

100% {
                background-position: 200%
            }
        }

.login-btn::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
            transition: .5s
        }

.login-btn:hover::before {
            left: 100%
        }

.login-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 10px #00eaff, 0 0 30px #00eaff, 0 0 60px rgba(123, 0, 255, .8)
        }

.login-btn:active {
            transform: scale(.97)
        }

.signup {
            text-align: center;
            margin-top: 28px;
            color: #999;
            font-size: 14px
        }

.signup a {
            color: #00eaff;
            text-decoration: none;
            font-weight: 700;
            transition: .3s
        }

.signup a:hover {
            color: #fff;
            text-shadow: 0 0 5px #00eaff, 0 0 15px #00eaff
        }

@media(max-width:450px) {
            .login-box {
                width: 90%;
                padding: 40px 25px
            }
        }

- Glowing Login form Animation

Live Preview