Shadows don't match on iOS vs Android

[beeradmoore]

Description

In our production app we would have a list of cards with shadows around them. Viewing the app on iOS vs Android felt different, it always felt like Android was darker between the cards. I assumed this was the screens not replicating colours the same. However when looking at the same item on iOS vs Android it became clear that how shadows work is different was in the native implementations.

In the below samples I have two square borders (100x100), with 20px round rectangle stroke. Shadow is black, opacity of 0.5, radius of 10. One of the borders has offset of 5,5 and the other would be at its default of 0,0.

<Border
    Grid.Row="0"
    StrokeShape="RoundRectangle 20"
    Background="Black"
    HorizontalOptions="Center"
    VerticalOptions="Center"
    WidthRequest="100"
    HeightRequest="100"
    StrokeThickness="0">
    <Border.Shadow>
        <Shadow Brush="Black" Radius="10" Opacity="0.5" />
    </Border.Shadow>
</Border>

<Border
    Grid.Row="1"
    StrokeShape="RoundRectangle 20"
    Background="Black"
    HorizontalOptions="Center"
    VerticalOptions="Center"
    WidthRequest="100"
    HeightRequest="100"
    StrokeThickness="0">
    <Border.Shadow>
        <Shadow Brush="Black" Radius="10" Opacity="0.5" Offset="5,5" />
    </Border.Shadow>
</Border>

I tested this on iPhone 14 and a Pixel 9 Pro XL. Both of these phones means the 100x100 box is 300x300 in screenshots so the shadows should match.

On the left hand side of this picture is Android, and on the right is iOS.

It may be my spider senses tingling, but I can see the different spread that the shadows on the left have.

NOTE: All images below are of the top border from the above image where it has no offset.

If I take a picker and look where the gradient ends (where the colour turns full white) you can see Android spreads more than iOS.

For reference the left side spreads 14.6px and the right side spreads 13px (whens scaled down from them both being @ 3x res). I don't know why both spread > 10px of the radius of the shadow.

With how much that is off I tried to stretch the height of the shadow in on the Android side down to the same height as on the iOS side. The result is better, but it isn't showing that is the only problem here.

Steps to Reproduce

1. Create shadow on border
2. Observe shadow on view

Link to public reproduction project repository

https://github.com/beeradmoore/maui-issue-ShadowsDontMatch

Version with bug

10.0.50

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android

Affected platform versions

iOS 26, Android 16

Did you find any workaround?

Nope.

It may be possible to change shadow opacity, colour, or radius per platform to make it appear to match better.

Relevant log output

[MihuBot]

I'm a bot. Here is a possible related and/or duplicate issue (I may be wrong):

• Shadow Radius is rendered differently on platforms #10630

[Ahamed-Ali]

This issue has been validated in Visual Studio Code 1.113.0 with .NET MAUI versions 10.0.0 and 10.0.50. There is no visible difference between Android 16 and iOS 26

Android 16	iOS 26

[beeradmoore]

@Ahamed-Ali the shadows are different. (EDIT: There is a vertical line shown in the middle of this picture caused by the the gradient fill of the shadow does not match)

The issue may look small here. But in a production app when you have big white square cards with 10px gap between and you are trying to do a 5px shadow and they overlap they make the gap between them even more noticeable. The quality and brightness of the device/monitor can make this effect worse.

If you try use offset to move the shadow towards the bottom right of the shape (like the second border in the example) then one shape has almost no shadow above it and the other does. This also impacts how the app would look on the two main mobile operating systems.