Blur Effect

Beautiful native blur effects on iOS

The effect can be applied to almost any visual element:

<Rock:ContainedCard HeightRequest="300" 
    <Label TextColor="White" 
        Text="Ultra Thin Blurred Card" />
        <Rock:BlurEffect BlurStyle="UltraThin" />

If a control provides a default background color, you must specify a background color of transparent. It's also recommended to remove all shadow effects.

The Blur Effect has many great uses and interestingly enough can be used in more places than one might imagine.

<Grid VerticalOptions="FillAndExpand">
    <StackLayout VerticalOptions="FillAndExpand">
        <Rock:Image Source="" />
    <ContentView VerticalOptions="Start">
            <Rock:BlurEffect BlurStyle="UltraThin" />
            <Rock:SafeAreaPaddingEffect Edges="Top" />

Above was a demonstration of how the Blur Effect can exclusively utilizes the space defined by the SafeAreaPadding, even when there is no content within the visual element.


The following properties are available to the effect.




What type of blur style would you like to be applied?

Blur Style

The blur style property is an enum, with the following accepted values:

  • Light

  • Dark

  • Thin

  • ThinDark

  • UltraThin

  • UltraThinDark

  • Thick

  • ThickDark

  • Chrome

  • ChromeLight

  • ChromeDark

  • System (default)

  • SystemDark

  • ExtraLight

  • ExtraDark

Here's a video that shows most of the blur styles that can apply to a visual element:

Last updated

⚙️ Powered by Rock RMS