Divi Text Module Gradient with Gradient Shadow

                        .de-text-gradient {
    position: relative;
    display: inline; /* or 'inline-block' depending on layout needs */
    background-image: linear-gradient(to right, #f687b3, #7f9cf5, #48bb78);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
                    

                        .de-text-gradient::before {
    content: attr(data-text); /* duplicate the text */
    position: absolute;
    top: 50%; /* centers vertically */
    left: 0;
    right: 0;
    transform: translateY(-15%); /* ensures perfect vertical centering */
    z-index: -1; /* places the shadow behind the text */
    background-image: inherit; /* uses the same gradient as the parent */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: blur(15px); /* adjust blur intensity as needed */
    width: 100%; /* ensures the blurred text has the same width as the original text */
    height: 100%; /* ensures the blurred text has the same height as the original text */
    display: inline; /* or 'inline-block' */
    font-size: inherit; /* ensures the blurred text is the same size as the original text */
    line-height: inherit; /* keeps the line height the same */
    text-align: center; /* centers the text horizontally */
}
                    

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