I am trying to blur a background image.

I have a background image of office environment and I have added a background overlay to it. And its that background I want to blur and make it slightly transparent.

This is the image and as you can see the overlay background isn’t blurred. I used to alpha to make it slightly transparent.

And this is the code I am trying to blur

@Composable
fun GradientBackground(
    modifier: Modifier = Modifier,
    enableOverlay: Boolean = false,
    hasToolbar: Boolean = true,
    content: @Composable ColumnScope.() -> Unit
) {

    Box(modifier = modifier
        .fillMaxSize()) {
        /* this is the office picture */
        Image(
            modifier = Modifier.fillMaxSize(),
            painter = painterResource(id = R.drawable.splash), contentDescription = null)

        if(enableOverlay) {
            /* This is the box and the backgroud I would like to blur over the image and make it slighty transparent */
            Box(
                modifier = modifier
                    .fillMaxSize()
                    .background(brush = Brush.verticalGradient(
                        listOf(Color.Gray.copy(alpha = 0.8f), Color.Black.copy(alpha = 0.9f))),
                    )
                    .blur(16.dp)
            )
        }

        Column(
            modifier = Modifier
                .fillMaxSize()
                .then(
                    if (hasToolbar) {
                        Modifier
                    } else {
                        Modifier.systemBarsPadding()
                    }
                )
        ) {
            content()
        }
    }
}