Does anyone know if it's possible to transparently mask images? I have a usecase where the image sho...

# compose

[Tom De Decker]

Does anyone know if it's possible to transparently mask images? I have a usecase where the image should blend into the background with a gradient, but I haven't been able to figure out a method that does the trick.

[Tom De Decker]

What I've tried (this uses Coil's AsyncImage but Compose's Image seems to behave the same):

@Composable
fun TransparentImage(
    imageUrl: String?,
    modifier: Modifier = Modifier,
) {
    AsyncImage(
        model = imageUrl,
        placeholder = PreviewPoster,
        contentDescription = null,
        contentScale = ContentScale.FillWidth,
        modifier = modifier
            .fillMaxWidth()
            .drawWithCache {
                val brush = Brush.verticalGradient(
                    0.0f to Color.White,
                    1.0f to Color.Transparent,
                )

                onDrawWithContent {
                    drawContent()
                    drawRect(brush, blendMode = BlendMode.DstIn)
                }
            },
    )
}

[Tom De Decker]

I've placed this composable inside a box with a green background but the preview does not show the color blending with the image and instead the image just seems to fade to what I presume is black:

[romainguy]

You're almost there. What you want is a graphicsLayer with an offscreen compositing strategy set on it

[romainguy]

This will create an intermediate transparent image for the effect to work

[Tom De Decker]

That does the trick! Thank you!