Looks like text size affects gradients? In this example, the gradient colours are "used up" in the f...

# compose

[Wilberforce Uwadiegwu]

Looks like text size affects gradients?
In this example, the gradient colours are "used up" in the first text but not in the second.

@Composable
private fun GradientText() {
    val brush = Brush.linearGradient(colors = listOf(Color.Blue, Color.Green, Color.Red, Color.Yellow))
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
    ) {
        Text(
            text = buildAnnotatedString {
                append("Do not allow people to dim your shine ")
                withStyle(
                    SpanStyle(brush = brush)
                ) {
                    append("because they are blinded.")
                }
                append(" Tell them to put some sunglasses on.")
            }
        )
        Text(
            text = buildAnnotatedString {
                append("Do not allow people to dim your shine ")
                withStyle(
                    SpanStyle(brush = brush)
                ) {
                    append("because")
                }
                append(" Tell them to put some sunglasses on.")
            }
        )
    }
}

Is there any way around this?

[Wilberforce Uwadiegwu]

It works with no issues with no AnnotatedString

Text(
    text = "because",
    style = TextStyle(brush = brush)
)

[Seri]

Do you see your expected behavior after creating a new Brush for each gradient Annotated String?

[Halil Ozercan]

This is an Android platform limitation. Android paint applies a given shader only to the entire text, not the specific span region. So when you want to draw a gradient over part of text, you can imagine that the gradient is sized according to full text, drawn behind, then only shown where you define the span.

[Halil Ozercan]

Only way you can workaround this is if you define a custom ShaderBrush and use the metrics provided to you from TextLayoutResult. That way you can size and create your shader as you wish

[Nitesh Singh]

val gradientBrush = Brush.linearGradient(
colors = listOf(Color.Blue, Color.Green, Color.Yellow, Color.Red),
start = Offset(0f, 0f), // Start from top-left
end = Offset(500f, 0f) // End to the right (horizontal gradient)
)

Text(
text = buildAnnotatedString {
withStyle(
style = SpanStyle(
brush = gradientBrush,
fontSize = 24.sp,
fontWeight = FontWeight.Bold
)
) {
append("Gradient Text in Jetpack Compose")
}
}
)

[Seri]

@Nitesh Singh is this your original solution, or is it untested code from an LLM?

[Halil Ozercan]

I will probably publish this tomorrow but if I don't get to, here is a breakdown of how you can solve this problem in Compose https://docs.google.com/document/d/1xnbXLfBfN1l__I3B9iOYiCz9ygMHfyB7nBwofqLOyzc/edit?usp=sharing

[Nitesh Singh]

@Seri what you mean original solution ? this is code for text gradient

[Chrimaeon]

If the code was written by you or a LLM

[Chrimaeon]

and also, @Nitesh Singh, please start formatting code snippets with the WYSIWYG editor or by using

or ``

.

[Nitesh Singh]

yes i written code by me

[Halil Ozercan]

https://halilibo.com/2025/styling-spanning-brushing-composing.html

Here is the full solution with detailed explanation of what is happening behind the scenes

[Seri]

Awesome entry, I'm looking forward to digging into it