Slideshow with fixed gradient background for items

Question

I'm trying to have a fixed gradient background on my slideshow items, but when you navigate through it, the background should remain fixed and the items should have the background color depending on their position.

I could make it work for a scroll behavior, but when I tried to implement it on a slideshow library it won't work because slideshows use the transform property to handle the navigation, and that makes my position: fixed child to be relative to the parent and not the window.

This is the issue i'm facing explained: CSS Transform Parent and Fixed child

And this is my current code

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  mask: linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0);
  width: 100%;
  min-width: 300px;
  height: 300px;
  border-radius: 10px;
  color: white;
}

.content:before {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0;
  width: 100%;
  background: linear-gradient(90deg, violet 0%, steelblue 100%);
}

And trying to implement it over https://www.npmjs.com/package/svelte-carousel?activeTab=readme but the library should by agnostic.