← Back to Compose UI
blur
Modifier
in
Compose UI
. Since 1.1.0Overview
Examples
Community Notes
@Composable
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)
)
}
@Composable
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)))
)
}
@Composable
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)
)
}
@Composable
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)))
)
}
Next ComponentAndroidView →