DEV Community

Cover image for How I Built GPU-Accelerated Frosted Glass and Acrylic Blur for .NET MAUI (And Why Every Other Library Gets It Wrong)
Plixroit
Plixroit

Posted on

How I Built GPU-Accelerated Frosted Glass and Acrylic Blur for .NET MAUI (And Why Every Other Library Gets It Wrong)

#dotnet #maui #csharp #android

Blur on Android in MAUI is kind of a mess. I needed a frosted-glass effect over a scrolling message list and everything I tried either stuttered or just looked bad when the content behind it moved.

So I dug into how all the existing libraries actually work under the hood. Turns out they're all doing the same thing:

  1. Grab a Bitmap of what's behind the view, on the CPU
  2. Run a blur pass in software
  3. Push it back up to the GPU
  4. Do it again next frame

Every. Single. Frame. No wonder it drops frames.

Why not just stay on the GPU the whole time?

Android 12 added RenderEffect and RenderNode. These let you hook into the GPU render pipeline directly and apply blur without ever touching the CPU. No bitmap snapshots, no software blur, no memory uploads between frames. The GPU just handles it natively.

That's the whole idea behind VitrumMAUI. Keep it on the GPU and get out of the way.

On a mid-range device blurring over a fast scroll, the difference is obvious. No jank.

Two views, that's it

BlurHostView wraps whatever content sits in the background. BlurConsumerView goes on top and shows the blurred result with an optional tint.

<vitrum:BlurHostView>
    <CollectionView ... />
</vitrum:BlurHostView>

<vitrum:BlurConsumerView
    BlurRadius="20"
    TintColor="#33FFFFFF" />
Enter fullscreen mode Exit fullscreen mode

No bitmaps to manage. No invalidation loops. No hacks.

Install 

dotnet add package VitrumMAUI --version 1.0.8
Enter fullscreen mode Exit fullscreen mode

Or in your csproj:

<PackageReference Include="VitrumMAUI" Version="1.0.8" />
Enter fullscreen mode Exit fullscreen mode

What's supported

Android version What you get
12+ (API 31+) Full GPU blur via RenderEffect
9 to 11 Tint-only fallback

iOS and macOS are not included. Apple's own blur APIs are solid and already built into the platform, so there's no point reinventing that.

Why I actually built this

I was working on a chat UI in my own app. The bottom sheet sits over the message list and I wanted it blurred. Everything I tried was either too slow or required me to wire up manual invalidation which felt wrong. I wanted something that just works without me babysitting it.

So I built it. It's one day old, rough around the edges, but the core works well.

GitHub: VitrumMAUI
NuGet: VitrumMAUI 1.0.8

MIT licensed. If you run into issues or have ideas, open an issue.

Top comments (0)