Search code examples
kotlincompose-multiplatform

Strange shadow behaviour


This is what I'm trying to achieve vs. what I have so far:

Box(
    modifier = Modifier
        .border(
            width = 1.dp,
            brush = Brush.linearGradient(colors = listOf(Color(0xFFEB00FF), Color(0xFF000AFF))),
            shape = RoundedCornerShape(2)
        )

        .height(353.dp)
        .width(534.dp)

        .background(
            color = Color.White,
            shape = RoundedCornerShape(2)
        )

        .shadow(
            shape = RoundedCornerShape(2),
            elevation = 12.dp,
            ambientColor = Color(0xFF9FA3F8),
            spotColor = Color(0xFF9FA3F8)
        ),
)

Solution

  • Building on my comment to the question, the "strange behavior" that the shadow seems to bleed inwards is caused by the graphics layer created by shadow overlaying the background. That can be easily fixed by just switching the order in which those two modifiers are applied.

    I interpreted your response that this is sufficient for you, although the resulting shadow won't radiate uniformily in all directions as it does in your reference screenshot.