Hello, how can I apply a shadow with a bottom elevation only? Seems

shadow

function applies elevation for all edges

How would that look like for large elevation values?

for example,

12dp

How do you apply a shadow to your element? If you are using

Surface

, then clipping all sides except bottom should work (border only for illustration):

Surface(
    elevation = 16.dp,
    modifier = Modifier
        .fillMaxWidth()
        .border(1.dp, Color.Magenta)
        .clip(GenericShape { size, _ ->
            lineTo(size.width, 0f)
            lineTo(size.width, Float.MAX_VALUE)
            lineTo(0f, Float.MAX_VALUE)
        })
) {
    Text(
        text = "Allow only bottom shadow",
        modifier = Modifier.padding(16.dp)
    )
}

No, it is a

Box

, not

Surface

. For

Surface

, it works but for

Box

, it is not. I think

shadow

is not incorporating properly

In this case

clip

should be applied before the

shadow

modifier:

Box(
    modifier = Modifier
        .fillMaxWidth()
        .clip(GenericShape { size, _ ->
            lineTo(size.width, 0f)
            lineTo(size.width, Float.MAX_VALUE)
            lineTo(0f, Float.MAX_VALUE)
        })
        .shadow(16.dp)
        .background(Color.White)
) {
    Text(
        text = "Allow only bottom shadow",
        modifier = Modifier.padding(16.dp)
    )
}

ohh you got me! Thank you for the help, really appreciate it!

That's not about these in particular, but about modifier order in general. They are applied one after another, that's why you should first clip the drawing area and then draw a shadow

Thanks for explaining!