Creates frosted glass UI effects with configurable Gaussian blur, color controls, lens refraction, vibrancy, highlights, shadows and SDF-based runtime shaders for realistic glass distortion and lighting.
A liquid glass effect library for Compose Multiplatform.
Based on AndroidLiquidGlass by Kyant.
KMP Liquid Glass lets you create frosted glass UI effects in Compose Multiplatform. The library provides blur, refraction, highlights, and shadow effects that work across Android, iOS, Desktop, and Web.
Key capabilities:
commonMain.dependencies {
implementation("io.github.kashif-mehmood-km:backdrop:0.0.1-alpha02")
}
For version catalog:
[libraries]
backdrop = { module = "io.github.kashif-mehmood-km:backdrop", version = "0.0.1-alpha02" }
This repo is also a Claude Code plugin marketplace. Installing the kmp-liquid-glass skill teaches Claude (and any agent on Claude Code) the library's mental model, the full effect / component / shader API, and a curated set of recipes — so prompts like "add a frosted glass tab bar" or "make this card iOS-style translucent" produce correct, idiomatic code on the first try.
In any Claude Code session, run:
/plugin marketplace add Kashif-E/KMPLiquidGlass
/plugin install kmp-liquid-glass@kmp-liquid-glass-marketplace
Then reload plugins (or restart the session):
/reload-plugins
Ask Claude something the skill should handle, for example:
Build a glass-style settings dialog using the
backdroplibrary — title "Notifications", two toggle rows, Cancel/Save buttons. Heavy frosted look like an iOS alert.
Claude should invoke the kmp-liquid-glass skill (you'll see it announce "Using kmp-liquid-glass …") and produce code that uses real APIs from com.kashif_e.backdrop.* with the correct effect ordering, dim placement, and z-order.
Tip: the skill is much more reliable when you mention the library by name in your prompt — say "use the backdrop library" or "iOS liquid glass" rather than just "make it glassy". Claude Code currently under-triggers skills for purely visual descriptions.
The plugin ships a single skill — kmp-liquid-glass — with progressive references:
The skill files are plain Markdown, so any agent that reads filesystem skills (Claude Agent SDK, custom harnesses, IDE extensions) can load plugins/kmp-liquid-glass/skills/kmp-liquid-glass/SKILL.md directly without going through the Claude Code marketplace.
The library uses a two-layer approach:
The backdrop captures its content into a graphics layer. When you draw a glass element, it samples from this captured content and applies your chosen effects.
Use rememberLayerBackdrop() to create a backdrop, then apply it to your background content with the layerBackdrop modifier:
val backdrop = rememberLayerBackdrop()
Image(
painter = painterResource(Res.drawable.wallpaper),
modifier = Modifier.layerBackdrop(backdrop).fillMaxSize()
)
Use drawBackdrop to create glass elements that sample from the backdrop:
Box(
modifier = Modifier
.drawBackdrop(
backdrop = backdrop,
shape = { RoundedCornerShape(24.dp) },
effects = {
blur(16.dp.toPx())
}
)
.size(200.dp)
)
The effects block is where you define what the glass looks like. You can chain multiple effects together.
All effects are applied inside the effects block of drawBackdrop.
Applies Gaussian blur to the sampled content.
effects = {
blur(radius = 16.dp.toPx())
}
| Parameter | Type | Description |
|---|---|---|
radius | Float | Blur radius in pixels |
Adjusts brightness, contrast, and saturation.
effects = {
colorControls(
brightness = 0.1f, // -1.0 to 1.0
contrast = 1.2f, // 0.0 to 2.0
saturation = 1.5f // 0.0 to 2.0
)
}
Applies an iOS-style vibrancy effect that enhances colors.
effects = {
vibrancy()
}
Creates glass refraction — the "liquid" part of liquid glass. Objects behind the glass appear distorted.
effects = {
lens(
refractionHeight = 24.dp.toPx(),
refractionAmount = 32.dp.toPx(),
chromaticAberration = true // RGB color separation
)
}
Sets the alpha transparency of the effect.
effects = {
opacity(alpha = 0.8f)
}
Applies advanced glass texture effects using a Signed Distance Field (SDF) texture. Creates realistic glass refraction with bevel lighting for 3D appearance.
val sdfBitmap = imageResource(Res.drawable.sdf_texture)
val sdfShader = rememberSdfShader(sdfBitmap)
Modifier.drawPlainBackdrop(
backdrop = backdrop,
shape = { RoundedCornerShape(50.dp) },
effects = {
blur(2.dp.toPx())
with(sdfShader) {
apply(
refractionHeight = 48.dp.toPx(), // Refraction intensity
lightAngle = 45f // Light direction in degrees
)
}
}
)
The SDF texture encodes:
| Parameter | Type | Default | Description |
|---|
Beyond effects, you can add highlights and shadows for depth:
Modifier.drawBackdrop(
backdrop = backdrop,
shape = { RoundedCornerShape(24.dp) },
effects = { blur(16.dp.toPx()) },
highlight = { Highlight.Ambient },
shadow = { Shadow(radius = 8.dp) },
innerShadow = { InnerShadow(radius = 4.dp) }
)
Highlight styles:
Highlight.Plain — Simple white overlayHighlight.Ambient — Soft ambient glowHighlight.Default(angle) — Directional highlight based on light angleThe library offers two modifiers:
drawBackdrop — Full-featured with highlights, shadows, and surface drawingdrawPlainBackdrop — Lighter version with just effects and basic drawingUse drawPlainBackdrop when you don't need highlights or shadows:
Modifier.drawPlainBackdrop(
backdrop = backdrop,
shape = { RoundedCornerShape(16.dp) },
effects = {
blur(8.dp.toPx())
colorControls(saturation = 1.2f)
}
)
On Android below API 31, effects gracefully degrade.
The library uses platform-specific shader implementations for advanced effects like vibrancy and lens refraction.
Android (API 33+): Uses AGSL (Android Graphics Shading Language), a variant of GLSL that runs on the GPU via RuntimeShader and RenderEffect.
iOS, Desktop, Web: Uses SkSL (Skia Shading Language) via Skia's RuntimeEffect and ImageFilter.
Both implementations produce visually equivalent results. The library abstracts these differences — you write the same Compose code and the correct shader runs on each platform.
For advanced use cases, you can create platform-specific shaders using expect/actual declarations:
The repository includes a catalog app demonstrating all features:
# Desktop
./gradlew :catalog:desktopApp:run
# Android
./gradlew :catalog:androidApp:installDebug
# Web
./gradlew :catalog:webApp:wasmJsBrowserRun
For iOS, open catalog/iosApp/iosApp.xcodeproj in Xcode.
backdrop/ Core library (published to Maven Central)
├── commonMain/ Shared code
├── androidMain/ Android implementation
└── skiaMain/ iOS, Desktop, Web implementation
catalog/ Demo application
├── sharedUI/ Shared UI components
├── androidApp/ Android demo
├── desktopApp/ Desktop demo
├── webApp/ Web demo
└── iosApp/ iOS demo
Copyright 2026 Kyant (Original), Kashif Mehmood (KMP Port)
Licensed under the Apache License, Version 2.0
SKILL.mdreferences/effects.md — every effect with parameter ranges and recipesreferences/components.md — full recipes for card, button, dialog, toggle, tab bar, search, FAB, sheet handle, sticky list header, scroll container with progressive blurreferences/advanced.md — SDF shaders, magnifier (combined backdrops), custom expect/actual shaders, performance tuningreferences/platform.md — exact API-level behavior matrix per effect, per platformedgeTreatment| TileMode |
| How to handle edges (default: Clamp) |
refractionHeight | Float | 48.dp | Height/intensity of refraction effect |
lightAngle | Float | 45° | Angle of light source for bevel highlights |
| Platform | Support | Rendering |
|---|
| Android | Full | Native RenderEffect (API 31+) / AGSL shaders (API 33+) |
| Desktop | Full | Skia |
| iOS | Full | Skia |
| Web | Full | Skia |
// commonMain
expect class CustomShader {
fun apply(scope: BackdropEffectScope)
}
// androidMain — AGSL
actual class CustomShader {
private val shader = RuntimeShader(agslCode)
actual fun apply(scope: BackdropEffectScope) {
scope.setRenderEffect(RenderEffect.createRuntimeShaderEffect(shader, "content"))
}
}
// skiaMain — SkSL
actual class CustomShader {
private val effect = RuntimeEffect.makeForShader(skslCode)
actual fun apply(scope: BackdropEffectScope) {
scope.setImageFilter(ImageFilter.makeRuntimeShader(effect, ...))
}
}
| Feature | Android | Skia platforms |
|---|
| Basic blur | API 31+ | All |
| Color controls | API 31+ | All |
| Vibrancy | API 33+ | All |
| Lens refraction | API 33+ | All |
| Custom shaders | API 33+ | All |
Surfaced from shared tags and platforms — no rankings paid for.