# blur

Common/All

## Functions summary

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/blur.modifier#(androidx.compose.ui.Modifier).blur(kotlin.Function1)(block: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Draws content with a blur whose radius can vary across the surface. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/blur.modifier#(androidx.compose.ui.Modifier).blur(androidx.compose.ui.unit.Dp,androidx.compose.ui.draw.BlurredEdgeTreatment)(radius: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, edgeTreatment: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurredEdgeTreatment)` Draws content blurred with the specified radius. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/blur.modifier#(androidx.compose.ui.Modifier).blur(androidx.compose.ui.graphics.blur.BlurRadiusSpec,androidx.compose.ui.draw.BlurredEdgeTreatment,kotlin.Float)( blurRadiusSpec: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/blur/BlurRadiusSpec, edgeTreatment: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurredEdgeTreatment, alpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html )` Draws content with a blur specified by `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).blur(androidx.compose.ui.graphics.blur.BlurRadiusSpec,androidx.compose.ui.draw.BlurredEdgeTreatment,kotlin.Float)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/blur.modifier#(androidx.compose.ui.Modifier).blur(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.draw.BlurredEdgeTreatment)( radiusX: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, radiusY: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, edgeTreatment: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurredEdgeTreatment )` Draws content blurred with the specified radii. | Cmn |

## Functions

### Modifier.blur

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/Blur.kt+function:blur) Added in [1.13.0-rc01](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.13.0-rc01)

```
fun Modifier.blur(block: BlurScope.() -> Unit): Modifier
```

Draws content with a blur whose radius can vary across the surface.

When `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).blur(kotlin.Function1)` assigns `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurScope#blurRadiusSpec()` multiple times, the last assignment wins.

A uniform radius renders on Android 12 (API 31) and above; spatially-varying radii (gradients and custom shaders) require Android 13 (API 33) and above. Below these versions the modifier is 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. Introduce additional space around the drawn content by the specified blur radius to remain within the content bounds.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.blur
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.blur.BlurRadiusSpec
import androidx.compose.ui.unit.dp

Box(
    Modifier.size(200.dp)
        .background(Brush.verticalGradient(listOf(Color.Red, Color.Blue)))
        // Sharp at the top, increasingly blurred toward the bottom.
        .blur(BlurRadiusSpec.verticalGradient(startRadius = 0.dp, endRadius = 24.dp))
)
```

```kotlin
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.blur
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.blur.BlurRadiusSpec
import androidx.compose.ui.unit.dp

var blurred by remember { mutableStateOf(false) }
val blurRadius by animateDpAsState(if (blurred) 24.dp else 0.dp, label = "blurRadius")
Box(
    Modifier.size(200.dp)
        .background(Brush.verticalGradient(listOf(Color.Red, Color.Blue)))
        // blurRadius is read inside the draw-time block, so the animation invalidates only the
        // draw phase.
        .blur {
            blurRadiusSpec =
                BlurRadiusSpec.verticalGradient(startRadius = 0.dp, endRadius = blurRadius)
        }
        .clickable { blurred = !blurred }
)
```

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.blur
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.blur.BlurRadiusSpec
import androidx.compose.ui.graphics.blur.BlurStop
import androidx.compose.ui.unit.dp

Box(
    Modifier.size(200.dp)
        .background(Brush.verticalGradient(listOf(Color.Red, Color.Blue)))
        .blur {
            blurRadiusSpec =
                BlurRadiusSpec.verticalGradient(
                    listOf(
                        BlurStop(fraction = 0f, radius = 0.dp),
                        BlurStop(fraction = 0.5f, radius = 4.dp),
                        BlurStop(fraction = 1f, radius = 24.dp),
                    )
                )
        }
)
```

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.blur
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.blur.BlurRadiusSpec
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp

// Blur direction in degrees, CSS convention: 0° fades toward the top, positive angles turn
// clockwise, so 45° fades toward the top-right.
val angleDegrees = 45f
Box(
    Modifier.size(width = 240.dp, height = 120.dp)
        .background(Brush.verticalGradient(listOf(Color.Red, Color.Blue)))
        .blur {
            val angle = angleDegrees * PI.toFloat() / 180f
            // Unit direction of increasing blur; y is negated because screen y points down.
            val dirX = sin(angle)
            val dirY = -cos(angle)
            // Half-length of the gradient line that exactly spans the layer at this angle:
            // the layer's corners project onto the line at fractions 0 and 1.
            val width = size.width.value
            val height = size.height.value
            val halfLength = (abs(width * dirX) + abs(height * dirY)) / 2f
            val center = DpOffset((width / 2f).dp, (height / 2f).dp)
            val halfLine = DpOffset((dirX * halfLength).dp, (dirY * halfLength).dp)
            blurRadiusSpec =
                BlurRadiusSpec.linearGradient(
                    start = center - halfLine,
                    end = center + halfLine,
                    startRadius = 0.dp,
                    endRadius = 16.dp,
                )
        }
)
```

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.blur
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.blur.BlurRadiusSpec
import androidx.compose.ui.unit.dp

Box(
    Modifier.size(200.dp)
        .background(Brush.verticalGradient(listOf(Color.Red, Color.Blue)))
        // Sharp at the center, blurred toward the edges (center and extent default to the
        // layer).
        .blur {
            blurRadiusSpec =
                BlurRadiusSpec.radialGradient(startRadius = 0.dp, endRadius = 24.dp)
        }
)
```

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.blur
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.blur.BlurRadiusSpec
import androidx.compose.ui.unit.dp

// A RuntimeShader whose alpha channel is a 0..1 blur intensity over the mask's maxRadius.
val radiusShader = remember {
    RuntimeShader(
        """
        uniform float2 size;
        half4 main(float2 coord) {
            // alpha is the blur intensity: 0 at the top (sharp) to 1 at the bottom.
            return half4(0.0, 0.0, 0.0, coord.y / max(size.y, 1.0));
        }
        """
            .trimIndent()
    )
}
// Hoisted so a single configuration is reused; the block re-runs at each resolve with the
// current layer size.
val maskRadius =
    remember(radiusShader) {
        BlurRadiusSpec.shader(maxRadius = 24.dp) { sizePx ->
            radiusShader.setFloatUniform("size", sizePx.width, sizePx.height)
            radiusShader
        }
    }
Box(
    Modifier.size(200.dp)
        .background(Brush.verticalGradient(listOf(Color.Red, Color.Blue)))
        .blur { blurRadiusSpec = maskRadius }
)
```

| Parameters |
|---|---|
| `block: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | configuration block run against `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurScope` |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` |   |

### Modifier.blur

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/Blur.kt+function:blur) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.10.0)

```
fun Modifier.blur(
    radius: Dp,
    edgeTreatment: BlurredEdgeTreatment = BlurredEdgeTreatment.Rectangle
): Modifier
```

Draws content blurred with the specified radius.

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. Introduce additional space around the drawn content by the specified blur radius to remain within the content bounds.

```kotlin
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)
)
```

```kotlin
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 |
|---|---|
| `radius: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | radius of the blur along both the x and y axis |
| `edgeTreatment: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurredEdgeTreatment = BlurredEdgeTreatment.Rectangle` | strategy used to render pixels outside content bounds |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` |   |

### Modifier.blur

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/Blur.kt+function:blur) Added in [1.13.0-rc01](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.13.0-rc01)

```
fun Modifier.blur(
    blurRadiusSpec: BlurRadiusSpec,
    edgeTreatment: BlurredEdgeTreatment = BlurredEdgeTreatment.Rectangle,
    alpha: Float = 1.0f
): Modifier
```

Draws content with a blur specified by `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).blur(androidx.compose.ui.graphics.blur.BlurRadiusSpec,androidx.compose.ui.draw.BlurredEdgeTreatment,kotlin.Float)`.

A uniform radius renders on Android 12 (API 31) and above; spatially-varying radii (gradients and custom shaders) require Android 13 (API 33) and above. Below these versions the modifier is 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. Introduce additional space around the drawn content by the specified blur radius to remain within content bounds.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.blur
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.blur.BlurRadiusSpec
import androidx.compose.ui.unit.dp

Box(
    Modifier.size(200.dp)
        .background(Brush.verticalGradient(listOf(Color.Red, Color.Blue)))
        // Sharp at the top, increasingly blurred toward the bottom.
        .blur(BlurRadiusSpec.verticalGradient(startRadius = 0.dp, endRadius = 24.dp))
)
```

| Parameters |
|---|---|
| `blurRadiusSpec: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/blur/BlurRadiusSpec` | varying blur radius configuration across the surface |
| `edgeTreatment: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurredEdgeTreatment = BlurredEdgeTreatment.Rectangle` | strategy used to render pixels outside content bounds |
| `alpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 1.0f` | opacity of the blurred content in the 0..1 range |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` |   |

### Modifier.blur

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/Blur.kt+function:blur) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.10.0)

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

Draws 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. Introduce additional space around the drawn content by the specified blur radius to remain within the content bounds.

```kotlin
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)
)
```

```kotlin
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 |
|---|---|
| `radiusX: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | radius of the blur along the x axis |
| `radiusY: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | radius of the blur along the y axis |
| `edgeTreatment: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurredEdgeTreatment = BlurredEdgeTreatment.Rectangle` | strategy used to render pixels outside content bounds |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` |   |