How to set gradient background in TopAppBar using Jetpack Compose

Question

I want to set the gradient background of my TopAppBar:

My code:

TopAppBar(
    modifier = Modifier.background(
        Brush.horizontalGradient(
            colors = listOf(
                Color.Red,
                Color.Green
            )
        )
    ),
    title = { Text("UI Components") },
    backgroundColor = Color.Transparent
)

Result:

I found this post: Jetpack Compose Button with gradient background? for button - so I set backgroundColor transparent and custom background via a modifier. Sadly in my case, there is an additional shadow around text which I don't know how to remove. What should I change or maybe TopAppBar is just not designed to be used using gradient and I should write something completely custom?

Answer 1

This shadow is caused by default elevation. Set it to zero:

TopAppBar(
    modifier = Modifier.background(
        Brush.horizontalGradient(
            colors = listOf(
                Color.Red,
                Color.Green
            )
        )
    ),
    title = { Text("UI Components") },
    backgroundColor = Color.Transparent,
    elevation = 0.dp
)