iOS 26-style frosted glass surfaces for Compose Multiplatform. A Modifier.liquidGlass() plus GlassCard, GlassButton, and GlassNavBar composables that produce backdrop blur, chroma lift, and an edge sheen — with built-in quality tiers that degrade gracefully on low-end Android and older iOS devices.

Compose's Modifier.blur blurs a composable's own content, not the backdrop behind it. Chris Banes's haze library solves the backdrop-blur problem beautifully, but it doesn't auto-degrade for memory-constrained devices — and the iOS 26 "liquid glass" effect is heavy enough that Apple disables it on older hardware.

liquid-glass is an opinionated, iOS-26-flavored take on glassmorphism with three explicit quality tiers and platform auto-detection:

Fallback allocates zero offscreen buffers and skips the blur entirely — so the same code runs without OOMing on a 2 GB Android 11 device and still looks reasonable.

gradle/libs.versions.toml:

[libraries]
liquid-glass = { module = "io.github.nadeemiqbal:liquid-glass", version = "0.2.3" }

commonMain dependencies:

kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation(libs.liquid.glass)
        }
    }
}

@Composable
fun Screen() {
    val state = rememberLiquidGlassState()    // auto-picks the tier for the device

    Box(Modifier.fillMaxSize()) {
        // 1) Anything inside this box becomes the backdrop that the glass samples from.
        //    Drop a `scenery.png` into
        //    `composeApp/src/commonMain/composeResources/drawable/`
        //    so `Res.drawable.scenery` is generated and shared across all targets.
        Image(
            painter = painterResource(Res.drawable.scenery),
            contentDescription = null,
            contentScale = ContentScale.Crop,
            modifier = Modifier.fillMaxSize().liquidGlassSource(state),
        )

        // 2) A floating glass card on top, sampling the backdrop above.
        GlassCard(
            state = state,
            modifier = Modifier.align(Alignment.Center).padding(24.dp),
        ) {
            Text("Frosted, light-refracting surface, drop-in")
        }
    }
}

Don't want to add an image? The bundled sample (sample/composeApp/.../SampleApp.kt) uses a programmatic ColorfulBackdrop composable with liquidGlassSource(state) applied to it, and demonstrates every tier without any resource setup.

That's it. Same code on Android, iOS, Desktop, and Web — and the same code on a low-RAM Android 11 device will quietly fall back to a flat tint + edge sheen with no GraphicsLayer allocation.

Override individual parameters at the call site; the per-tier values from LiquidGlassDefaults.forQuality are the sensible defaults:

GlassCard(
    state = state,
    shape = RoundedCornerShape(28.dp),
    blurRadius = 30.dp,
    saturation = 1.6f,
    tint = Color.White.copy(alpha = 0.35f),
    borderHighlight = Brush.verticalGradient(
        0f to Color.White.copy(alpha = 0.6f),
        1f to Color.Transparent,
    ),
    grain = 0.04f,         // subtle frosted texture (v0.2.0+)
    refraction = 0.4f,     // SkSL/AGSL pixel-offset distortion (v0.2.0+)
) { /* … */ }

Derive the sheen color from the captured backdrop, instead of the static white gradient:

GlassCard(
    state = state,
    borderHighlight = rememberDynamicSheen(state),
) { /* … */ }

The library polls the backdrop layer every 500 ms (configurable), averages its pixels, and produces a vertical-gradient brush from that color. Falls back to the static brush on platforms where backdrop sampling isn't available (e.g. wasmJs).

if (showDialog) {
    GlassDialog(onDismissRequest = { showDialog = false }) {
        Text("Material 3 Dialog with a liquid-glass surface.")
    }
}

if (showSheet) {
    GlassBottomSheet(onDismissRequest = { showSheet = false }) {
        Text("Material 3 ModalBottomSheet with a liquid-glass surface.")
        // …list items, etc.
    }
}

Both dialogs and bottom sheets host their own LiquidGlassState, so the glass samples the dialog's own composition (typically just the system scrim), not the host activity behind it. This matches how Modifier.blur and haze behave with dialogs.

Force a specific tier (e.g. for a brand-mandated "Full everywhere" experience):

val state = rememberLiquidGlassState(LiquidGlassQuality.Full)

…or downgrade for low-end shells without waiting for auto-detection:

val state = rememberLiquidGlassState(LiquidGlassQuality.Fallback)

• [x] GlassDialog and GlassBottomSheet Material 3 wrappers — shipped in v0.2.0
• [x] Dynamic-color edge sheen (sample from the captured backdrop) — shipped in v0.2.0
• [x] Android-only single-pass chained RenderEffect (blur + saturation) on API 31+ — shipped in v0.2.0
• [x] Optional grain / noise overlay — shipped in v0.2.0
• [x] Refraction shader (SkSL on Skia targets, AGSL on Android API 33+) — shipped in v0.2.0

• Opt-in Modifier.iosNativeGlass() interop using UIVisualEffectView / UIGlassEffect on iOS 26+
• Animated refraction (time-driven uniforms)
• Vary the refraction pattern (caustics, droplets) via additional SkSL shader sources

See CONTRIBUTING.md.

Apache 2.0.