An AvaloniaUI “liquid glass” backdrop effect: vibrancy → blur → rounded-rect lens refraction (optional dispersion) → edge highlight.
This project implements a composited backdrop pipeline using AvaloniaUI + SkiaSharp (SKRuntimeEffect) on Avalonia’s Skia renderer.
Requires the Skia renderer (Avalonia.Skia).
Screen.Recording.2026-01-10.at.15.55.20_compressed_v3.mp4
More headless-rendered examples:
| Distortion (refraction + CA) | Magnifier (zoom + offset) |
|---|---|
![]() |
![]() |
| Progressive mask blur |
|---|
![]() |
- Clone the repository
- Open the solution in your IDE
- Run the
LiquidGlassAvaloniaUI.Demoproject to see the effects in action
The demo includes a floating draggable glass card for quick testing.
To validate rendering headlessly and optionally emit PNGs:
dotnet test LiquidGlassAvaloniaUI.sln -c Release- (optional)
LIQUIDGLASS_TEST_OUTPUT_DIR=./artifactsto writewith-glass.png/without-glass.png - (optional)
LIQUIDGLASS_README_SCREENSHOTS_DIR=./docs/screenshots dotnet test LiquidGlassAvaloniaUI.Tests/LiquidGlassAvaloniaUI.Tests.csproj -c Release --filter FullyQualifiedName~ReadmeScreenshotGeneratorto (re)generate the screenshots above
LiquidGlassSurface- AContentControlthat draws the liquid-glass pipeline behind its child and clips toCornerRadius.LiquidGlassInteractiveSurface- Adds press/drag deformation + interactive highlight.
Developing this project has made me realize that AvaloniaUI is still relatively immature when it comes to high-end visual effects.
While the framework offers impressive cross-platform capabilities, there is still a significant gap in providing a "mature and seamless" experience for low-level rendering pipelines and advanced shader integration. Achieving these effects often requires fighting with the underlying APIs rather than working with the framework itself, highlighting the ongoing tension between flexibility and out-of-the-box usability in the current ecosystem.
- Inspired by liquid-glass-react
- Thanks to Kyant0/AndroidLiquidGlass
- Assisted by OpenAI Codex (GPT-5.2)
MIT License - see LICENSE file for details.



