Blur Gradient - Backdrop-filter

[bonnmh]

Hi @william-candillon , I’m trying to recreate a UI that includes a semi-transparent overlay with a linear gradient background and a backdrop-filter blur effect — similar to how it’s done on the web with CSS. Here’s an example of the effect I’m aiming for in CSS:

background: linear-gradient( 180deg, rgba(250, 250, 250, 0.90) 0%, rgba(250, 250, 250, 0.80) 80%, rgba(250, 250, 250, 0.00) 100% ); backdrop-filter: blur(20px); /* Example value */

I’ve tried using react-native-skia to recreate this with a blur shader or effect, but I haven’t been successful so far. I’ve also watched some GLSL gradient/blur tutorial videos (including some from this repo’s authors/community), but I still couldn’t achieve the desired effect.

Have anyone successfully implemented something like this using Skia, possibly with a custom shader or another approach? I’d really appreciate any pointers, examples, or guidance.

Thanks in advance!

[wcandillon]

you don't need a custom shader for it right? you can just overlay the gradient and use the backdrop filter no? This example seems to be relevant: https://shopify.github.io/react-native-skia/docs/backdrops-filters/#example-1

…

On Thu, Jul 3, 2025 at 6:40 AM bonnmh ***@***.***> wrote: Hi @william-candillon <https://github.com/william-candillon> , I’m trying to recreate a UI that includes a semi-transparent overlay with a linear gradient background and a backdrop-filter blur effect — similar to how it’s done on the web with CSS. Here’s an example of the effect I’m aiming for in CSS: background: linear-gradient( 180deg, rgba(250, 250, 250, 0.90) 0%, rgba(250, 250, 250, 0.80) 80%, rgba(250, 250, 250, 0.00) 100% ); backdrop-filter: blur(20px); /* Example value */ I’ve tried using react-native-skia to recreate this with a blur shader or effect, but I haven’t been successful so far. I’ve also watched some GLSL gradient/blur tutorial videos (including some from this repo’s authors/community), but I still couldn’t achieve the desired effect. Have anyone successfully implemented something like this using Skia, possibly with a custom shader or another approach? I’d really appreciate any pointers, examples, or guidance. Thanks in advance! image.png (view on web) <https://github.com/user-attachments/assets/a6e452c5-66dd-41b5-941d-af02ac2adae2> — Reply to this email directly, view it on GitHub <#3223>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVQ53PUVIEJK3SFDIFL3GSX3JAVCNFSM6AAAAACAVVFOEOVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZYGUZDIOBYGQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[bonnmh]

Hi wcandillon! 👋
Thanks so much for the response! I've actually tried BackdropBlur before, but it only works with static images declared within the Canvas - it can't function as an overlay that sits above scrollable content.
It seems like with views outside the Canvas, we can only take snapshots and then draw them using Skia Image, which doesn't work for scrollable UI since the content is constantly changing.
I'm trying to create a blur effect that can overlay dynamic/scrollable content (like ScrollView or FlatList) - basically the React Native equivalent of CSS backdrop-filter. The current BackdropBlur seems to require the background content to be rendered within the same Canvas context.
Do you have any suggestions for achieving this kind of dynamic backdrop blur effect? Maybe a different approach or combination of Skia components that could work?
Really appreciate all your amazing work on React Native Skia - been following your tutorials and projects for years! 🙌

[wcandillon]

yes indeed it won't work with scrollable content outside the Skia canvas unfortunately. Thank You for your kind words :)