Is there any way to remove the shadow from the int...

# compose-desktop

[Keith Karanu]

Is there any way to remove the shadow from the interior of the element?

[Keith Karanu]

@Composable
fun FluentSurface(modifier: Modifier = Modifier, content: @Composable () -> Unit) {

    Surface(
        modifier,
        elevation = 4.dp,
        color = Color(0xb3ffffff),
        shape = RoundedCornerShape(7.dp),
        border = BorderStroke(1.dp, Color(0x66757575)),
        content = content
    )

}

[Kirill Grouchnikov]

You're using translucent fill color, so this is what you get

[andrew]

If this is a Fluent Design UI system, you'd probably be better off to do it from scratch as opposed to using the Material system underneath

[Keith Karanu]

This is meant more as a proof of concept. I was planning on rewriting it from scratch later.

[Keith Karanu]

Turns out you can get it to work by using BlendMode.Src and manually drawing the rounded rectangle.

[Keith Karanu]

message has been deleted

[Keith Karanu]

@Composable
fun FluentSurface(modifier: Modifier = Modifier, elevation: Dp = 4.dp, content: @Composable () -> Unit = {}) {
    Box(modifier
        .shadow(elevation, RoundedCornerShape(7.dp))
        .drawBehind {
            drawRoundRect(
                Color(0xb3ffffff),
                cornerRadius = CornerRadius(7f, 7f),
                blendMode = BlendMode.Src
            )
        }) {
        content()
    }
}

[andrew]

Really shouldn’t have to as long as your modifier order is correct

[Keith Karanu]

I tried that. Regardless of order you get weird artifacts.

[andrew]

This surface is transparent, correct?

[Keith Karanu]

yes

[andrew]

That’s probably your culprit

[andrew]

My assumption is this emulates android’s elevation system, and this is one of those quirks with it

[Keith Karanu]

Changing the blend mode seems to fix it.

[andrew]

I think Kirill mentioned this

[andrew]

I’d be careful with blend modes, it can affect other composables too

[andrew]

Hence why your shadow is affected