Divi Text Module with Animated Shadow Gradient

                        /* Defines keyframes for a gradient background animation. */
@keyframes de-gradient-animation {
    0% {
        background-position: 0% 50%; /* Start position of the gradient */
    }
    100% {
        background-position: 100% 50%; /* End position ensures the gradient sweeps across the element */
    }
}
                    

                        /* Applies an animated gradient effect to text. */
.de-text-gradient-animated {
    position: relative;
    display: inline; /* Changed to inline to better control positioning */
    color: transparent; /* Makes the text color transparent to allow the gradient to be visible */
    background-image: linear-gradient(90deg, #f687b3, #7f9cf5, #48bb78); /* Gradient colors and direction */
    background-size: 300% 300%; /* Enlarged background size to enable a visible sliding effect */
    -webkit-background-clip: text;
    background-clip: text; /* Clips the background to the text shape */
    animation: de-gradient-animation 5s linear infinite; /* Applies the defined animation to create a continuous effect */
}
                    

                        /* Creates a blurred version of the animated text behind the original text. */
.de-text-gradient-animated::before {
    content: attr(data-text); /* Uses the 'data-text' attribute to duplicate content */
    position: absolute;
    top: 0; /* Aligns the blurred text to the top of the parent */
    left: 0;
    right: 0;
    transform: translateY(25%); /* Vertical offset removed for direct overlay */
    z-index: -1; /* Ensures the blur is behind the text */
    background-image: inherit; /* Inherits the gradient from the parent */
    background-size: inherit; /* Ensures identical sizing for consistent animation */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: blur(30px); /* Blur effect to create a soft glow */
    width: 100%;
    height: 100%;
    display: inline-block; /* Maintains block level properties while flowing like inline elements */
    font-size: inherit; /* Inherits font size from parent for consistent styling */
    line-height: inherit;
    text-align: inherit; /* Aligns text according to parent's settings */
    animation: inherit; /* Inherits animation to synchronize movements */
}
                    

                        <span class="de-text-gradient-animated" data-text="Animated Gradient">Animated Gradient</span>