Lazy Column with Scrollable Gradient background in Jetpack Compose

I'm working on a Jetpack Compose app having a Scaffold layout. My layout includes a title, a tab bar, and a LazyColumn. I want to create a gradient background that scrolls with the LazyColumn content and also covers some fixed elements like the title and tabs at the top, as well as a few items from the top of the list as shown in the Image.

Desire result:

Current Attempts:

As shown in below code, I tried to apply the background directly to the LazyColumn, but it creates a fixed background rather than a scrolling background.

LazyColumn(modifier = Modifier
                    .fillMaxSize()                  
                    .background( brush = Brush.verticalGradient(
                            colorStops = colorStops
                     ))
           ) { ... }

I also tried to add Box inside the LazyColumn but that didn't work as either.

Then, I tried the below code from this link https://slack-chats.kotlinlang.org/t/508715/i-have-a-lazy-column-with-a-gradient-background-and-i-want-t

val scrollState = rememberLazyListState()
Box(Modifier.background(Color.Black)) {
  GradientBackground(
    Modifier
      .fillMaxSize()
      .offset { IntOffset(0, -scrollState.firstVisibleItemScrollOffset) }
  )
  LazyColumn(…)
}

However, this approach did not move the background as expected.

Here's what I want to achieve:

• The gradient background should scroll with the LazyColumn content.
• The gradient should also cover fixed elements (such as the title and tabs) at the top and a few elements from the LazyColumn.