{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

BlurKt

public final class BlurKt


Summary

Public methods

static final @NonNull Modifier
blur(
    @NonNull Modifier receiver,
    @NonNull Dp radius,
    @NonNull BlurredEdgeTreatment edgeTreatment
)

Draw content blurred with the specified radii.

static final @NonNull Modifier
blur(
    @NonNull Modifier receiver,
    @NonNull Dp radiusX,
    @NonNull Dp radiusY,
    @NonNull BlurredEdgeTreatment edgeTreatment
)

Draw content blurred with the specified radii.

Public methods

blur

public static final @NonNull Modifier blur(
    @NonNull Modifier receiver,
    @NonNull Dp radius,
    @NonNull BlurredEdgeTreatment edgeTreatment
)

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.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.BlurredEdgeTreatment
import androidx.compose.ui.draw.blur
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

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)
)
import androidx.compose.foundation.Image
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.BlurredEdgeTreatment
import androidx.compose.ui.draw.blur
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp

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)))
)
Parameters
@NonNull Dp radius

Radius of the blur along both the x and y axis

@NonNull BlurredEdgeTreatment edgeTreatment

Strategy used to render pixels outside of bounds of the original input

See also
graphicsLayer

Example usage:

blur

public static final @NonNull Modifier blur(
    @NonNull Modifier receiver,
    @NonNull Dp radiusX,
    @NonNull Dp radiusY,
    @NonNull BlurredEdgeTreatment edgeTreatment
)

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.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.BlurredEdgeTreatment
import androidx.compose.ui.draw.blur
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

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)
)
import androidx.compose.foundation.Image
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.BlurredEdgeTreatment
import androidx.compose.ui.draw.blur
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp

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)))
)
Parameters
@NonNull Dp radiusX

Radius of the blur along the x axis

@NonNull Dp radiusY

Radius of the blur along the y axis

@NonNull BlurredEdgeTreatment edgeTreatment

Strategy used to render pixels outside of bounds of the original input

See also
graphicsLayer

Example usage: