Share background image between elements using CSS or TailwindCSS

Question

I'm trying to make something like this on Tailwind or pure css...

So basically we could share some background between elements with some css similar like this (we use this class on each element):

.item {
    background-image: linear-gradient(to right, red, blue);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

and this is the HTML, it shouldn't matter the amount of divs, the important thing is to display the complete gradient scale...

            <div class="w-full mb-4 ">
                <div class="flex flex-row" >
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1" ></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1" ></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>                        
                </div>
            </div>

The problem is that "background-attachment: fixed" is relative to the viewport and not the container element. So in order to see the full color scale I have to maximize the browser.

Is there any trick for this or any background-attachment that is relative to the container but not the viewport?