Problem with styling text in the horizontal carousel. The text should change the color

Question

The text should change the color dependent on where it is. For example on the left corner it should be orange, on the right violet.You can see clear transition in the middle where there is a border of two colors.

Actually, it is a linear-gradient background that I set as an overlay on the top layer. However I cannot get as same result as in figma.

What I did: enter image description here The code:

.banner {
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
    background: rgb(255, 255, 255);
    &__overlay{
        position: absolute;
        background: linear-gradient(90deg, rgba(255,105,20, 0.5) 0%, rgba(145,69,253, 0.5) 100%);
        width: 100%;
        height: 100%;
        z-index: 10;
    }
    &__wrapper{
        display: flex;
        align-items: center;
        gap: 78px;
        animation: banner 20s linear infinite;
    }
    &__item {
        color: black;
        font-size: 1.6rem;
        font-style: normal;
        line-height: normal;
        text-transform: uppercase;
        white-space: nowrap;
    }

}

@keyframes banner {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-100%);
    }
}

How it must look like: enter image description here

<div class="banner">
        <div class="banner__overlay"></div>
        <div class="banner__wrapper">
            <div class="banner__item">
                SECURITY
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                FAULT-TOLERANCE
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                BOT-MITIGATION
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                FAULT-TOLERANCE
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                SECURITY
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                FAULT-TOLERANCE
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                BOT-MITIGATION
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
        </div>
        <div class="banner__wrapper">
            <div class="banner__item">
                SECURITY
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                FAULT-TOLERANCE
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                BOT-MITIGATION
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                FAULT-TOLERANCE
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                SECURITY
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                FAULT-TOLERANCE
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                BOT-MITIGATION
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
        </div>
    </div>

Answer 1

All what I had to do was add mix-blend-mode: multiply; for banner__overlay and correct my linear gradient.

I have added two more points in linear-gradient in order to make two side colors more bright.

.banner {
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
    background: rgba(255, 255, 255, 0.07);
    height: 30px;
    &__overlay{
        position: absolute;
        background: linear-gradient(90deg, rgba(255,105,20,0.7) 0%, rgba(255,105,20,0.7) 45%, rgba(145,69,253,0.7) 55%, rgba(145,69,253,0.7) 100%);
        width: 100%;
        height: 100%;
        z-index: 10;
        mix-blend-mode: multiply;
    }
    &__wrapper{
        display: flex;
        align-items: center;
        gap: 78px;
        animation: banner 20s linear infinite;
    }
    &__item {
        color: rgba(255, 255, 255, 1);
        font-size: 1.6rem;
        font-style: normal;
        line-height: normal;
        text-transform: uppercase;
        white-space: nowrap;
    }

}

Now it looks good and as close similar as design in figma. enter image description here