New Compose Multiplatform components arrived on Composables UICheck it out →

Modifier in Compose Ui

blur

Common

Draw content blurred with the specified radii. Note this effect is only supported on Android 12 and above. Attempts to use this Modifier on older Android versions will be ignored.

Usage of this API renders the corresponding composable into a separate graphics layer. Because the blurred content renders a larger area by the blur radius, this layer is explicitly clipped to the content bounds. It is recommended introduce additional space around the drawn content by the specified blur radius to remain within the content bounds.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.ui:ui:1.7.0-beta04")
}

Overloads

@Stable
fun Modifier.blur(
    radiusX: Dp,
    radiusY: Dp,
    edgeTreatment: BlurredEdgeTreatment = BlurredEdgeTreatment.Rectangle,
)

Parameters

namedescription
radiusXRadius of the blur along the x axis
radiusYRadius of the blur along the y axis
edgeTreatmentStrategy used to render pixels outside of bounds of the original input
@Stable
fun Modifier.blur(
    radius: Dp,
    edgeTreatment: BlurredEdgeTreatment = BlurredEdgeTreatment.Rectangle
)

Parameters

namedescription
radiusRadius of the blur along both the x and y axis
edgeTreatmentStrategy used to render pixels outside of bounds of the original input

Code Examples

BlurSample

@Composable
@Sampled
fun BlurSample() {
    Box(
        Modifier.size(300.dp)
            // Blur content allowing the result to extend beyond the bounds of the original content
            .blur(
                30.dp,
                edgeTreatment = BlurredEdgeTreatment.Unbounded
            )
            .background(Color.Red, CircleShape)
    )
}

ImageBlurSample

@Composable
@Sampled
fun ImageBlurSample() {
    Image(
        painter = painterResource(R.drawable.circus),
        contentDescription = "sample blurred image",
        // Blur content within the original bounds, clipping the result to a rounded rectangle
        modifier = Modifier.blur(30.dp, BlurredEdgeTreatment(RoundedCornerShape(5.dp)))
    )
}