Is there any reason when I have circle button with opacity an octogon apears inside?

@Composable
fun NavButton() {
    Button(
        onClick = {  },
        shape = CircleShape,
        modifier = Modifier.size(50.dp),
        colors = ButtonDefaults.buttonColors(
            backgroundColor = Color.Gray.copy(.25f),
            contentColor = Color.White
        )
    ) {
//        Text("Test")
    }
}

I can't see the picture well, but if it has any shadow, I suppose it's what you see there. I tried to make a floating action button (on Android) transparent, but got the same octagon

Transparent / translucent content doesn't go well (at all, actually) with elevation drop shadows

@Denis Thanks for the suggestion, but I did end up testing by trying to forcing the elvatation and shadow modifer to be 0 and it still has that octogon affect inside, also if you click the link and scroll in, the octogon is very apparent

@Kirill Grouchnikov, could you give any reasons for that? Is it because shadows are hard in general? (I know nothing about computer graphics)

@romainguy has a presentation (or maybe slides?) on how the drop shadows are implemented in native code. It's basically a bunch of overlapping translucent shapes that create the overall effect. But that overlap only looks "right" with a fully opaque shape that "hides" the rest of the visuals.

It’s not overlapping shapes no, it’s a mesh

There was a nice image I saw around the Lollipop timeframe. Was there a white paper or something on the implementation details?