.box {
    position: relative;
    overflow: visible; /* important - we need glow to be partially outside */
}

    .box::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 90%;
        height: 70%;
        transform: translate(-50%, -50%) scale(0.9) translateZ(0);
        filter: blur(20px);
        background: linear-gradient( to left, #463172, #5D3E8E, #7356A7, #8A6FD1, #7356A7, #5D3E8E, #463172 );
        background-size: 200% 200%;
        animation: animateGlow 1.5s linear infinite;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        z-index: -1;
    }

    .box:hover::after {
        opacity: 1;
        animation: animateGlow 1.25s linear infinite;
    }

@keyframes animateGlow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}