Card element with shadow only on the bottom

Question

I am trying to create Card element and to add shadow only on bottom part with a little bit in left and right and zero on the top.

 Card(
    elevation = 10.dp,
    modifier = Modifier
        .background(color = seatfrogWhite, shape = RoundedCornerShape(4.dp))
        .graphicsLayer {
            this.shadowElevation = 10.dp.toPx()
            this.shape = RoundedCornerShape(4.dp)
            this.clip = true
        }
        .height(50.dp)
        .width(100.dp),
    shape = RoundedCornerShape(4.dp)
) {}

I have tried with shadow() modifier, but without success. It always add shadow on the top.

Answer 1

You can use the M3 ElevatedCard:

ElevatedCard(
    Modifier.size(width = 180.dp, height = 50.dp),
    shape = RoundedCornerShape(4.dp),
    elevation = CardDefaults.elevatedCardElevation(8.dp),
    colors = CardDefaults.elevatedCardColors(containerColor = Teal200),
) {
    // Card content
}