Skip to content

Blur Effect

Blur creates a frosted-glass effect over content in your UI. It can blur the content behind a surface, or a composable's own content.

Download

Maven Central

repositories {
    mavenCentral()
}

dependencies {
    // Core library infrastructure
    implementation("dev.chrisbanes.haze:haze:<version>")

    // Blur effect
    implementation("dev.chrisbanes.haze:haze-blur:<version>")

    // Optional: Pre-built blur styles
    implementation("dev.chrisbanes.haze:haze-blur-materials:<version>")
}

Platform Support

Blur is available on every platform Haze supports:

Platform Notes
Android Android 6.0 (API 23)+. Blurs by default on Android 12+; a translucent scrim is drawn on Android 11 and below unless you opt in.
Desktop (JVM) Full support.
iOS & macOS Full support.
Web (Wasm, JS) Full support.

See Platforms for details.

Basic Usage

Mark the content to blur with hazeSource, then apply Modifier.hazeBlur to the surface drawn over it:

val hazeState = rememberHazeState()
val style = HazeMaterials.thin()

Box {
    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
            .hazeSource(state = hazeState)
    ) {
        // scrollable content
    }

    TopAppBar(
        modifier = Modifier.hazeBlur(
            input = HazeInput.Backdrop(hazeState),
            style = style,
        ),
    )
}

See the Blur usage guide for more.

Styling

HazeBlurStyle controls how Blur looks:

  • Blur radius: the strength of the blur.
  • Tint: a color overlay that improves contrast.
  • Noise: visual texture.

For ready-made styles, see the material presets. To follow the current Material 3 theme, see the Material 3 integration.

Performance

Blur can be expensive. See Performance for how to measure and tune it.

Next Steps