I’m working on a Compose Multiplatform project and need to apply a color filter to an image (e.g., grayscale, sepia, or custom filters). I’ve been exploring Painter and ImageBitmap, but I’m not sure about the best approach to achieve this in a cross-platform way.

Here are a few specifics about what I’m looking for:

The filter should be applied dynamically (e.g., when the user selects a filter option).
It should work seamlessly across all platforms supported by Compose Multiplatform.
If possible, I’d prefer not to rely heavily on platform-specific APIs unless absolutely necessary.
I’ve seen some implementations in Android Compose using Modifier.graphicsLayer or drawWithCache, but I don’t know if these work the same in Compose Multiplatform.

Could anyone point me in the right direction? A sample code snippet or links to documentation/examples would be greatly appreciated!

I’ve experimented with Modifier.graphicsLayer and drawWithCache, but most examples I found were specific to Android Compose. I also tried using Brush.linearGradient with a Box to overlay the gradient, but I couldn’t figure out how to blend it with the image properly.

Here’s what I want to achieve:

Dynamically apply a gradient (e.g., a linear or radial gradient) over the black image.
Blend the gradient with the image (e.g., using blending modes like multiply or similar).
Ensure it works across platforms supported by Compose Multiplatform.
Does anyone have a solution or approach for this? A code example or references would be incredibly helpful!

Image(
    painter = painterResource(resource = Res.drawable.profile_look), // Replace with your image resource
    contentDescription = "About Me Image",
    contentScale = ContentScale.Crop,
    colorFilter = ColorFilter.tint(Color.Red),
    modifier = Modifier
        .size(imageSize) // Smaller size for compact layout
        .clip(RoundedCornerShape(16.dp))

Here colorFilter not working on Compose Multiplatform Web

Thanks for your time! 😊