I wanted to add shadow to a composable. Shadow should be only applied to the top. (Not required for left or right). Is there some way to achieve this. Code snippet I already tried,

Box(
  modifier = Modifier
    .background(Color.Yellow)
    .shadow(
      elevation = 2.dp,
    ),
) {
content()
}

You could use

drawWithContent

modifier to clip the content as you need. For example recently I create a custom modifier which is uses

drawWithContent

inside:

fun Modifier.clipSides(
    left: Boolean = true,
    top: Boolean = true,
    right: Boolean = true,
    bottom: Boolean = true
): Modifier = drawWithContent {
    clipRect(
        left = if (left) 0f else -Float.MAX_VALUE,
        top = if (top) 0f else -Float.MAX_VALUE,
        right = if (right) size.width else Float.MAX_VALUE,
        bottom = if (bottom) size.height else Float.MAX_VALUE,
    ) {
        this@drawWithContent.drawContent()
    }
}

Thus you can use it on your Box to clip only sides you need:

Box(
  modifier = Modifier
    .background(Color.Yellow)
    .shadow(elevation = 2.dp)
    .clipSides(top = false, bottom = false),
) {
content()
}

I have tried this approach , If you see the screenshot the shadow is getting applied on top , left and right

Oops, true I used it on

Surface

:

Surface(
    shadowElevation = 8.dp,
    color = Color.Yellow,
    modifier = Modifier.clipSides(top = false, bottom = false),
) {
    Button(
        onClick = { /* Empty */ },
        modifier = Modifier.padding(16.dp)
    ) {
        Text(text = "Test")
    }
}

This works , But one problem I have noticed is if I set shadow(elevation) to Box its more visible. Whereas in case of surface if I apply elevation its not really that visible

Looks pretty same to me 🧐 Maybe it’s because you have swapped modifiers order? Shadow should go before background I guess

Row(
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterHorizontally),
    modifier = Modifier.fillMaxSize()
) {
    Surface(
        shadowElevation = 2.dp,
        color = Color.Yellow,
    ) {
        Button(
            onClick = { /* Empty */ },
            modifier = Modifier.padding(16.dp)
        ) {
            Text(text = "Test")
        }
    }
    Box(
        modifier = Modifier
            .shadow(2.dp)
            .background(Color.Yellow)
    ) {
        Button(
            onClick = { /* Empty */ },
            modifier = Modifier.padding(16.dp)
        ) {
            Text(text = "Test")
        }
    }
}

Its the same code I have also executed . But in the

Surface

can't find a param called

shadowElevation

like you shared above. All I can find is

elevation

. Will that be the issue😕, other than that Its exactly the same code I have written

Mine

Surface

comes from Material3 library, yours if from Material2. Just tried it with M2

Surface

and it looks same to me 😅

In the first screenshot, I have used Box where shadow is much more visible (but clip is not getting applied). In second screenshot I have used surface , I can find the shadow but its very much less compared to the first one.

Seems like you have wrong modifiers order on your Box 🤔 Do you use

Box(
  modifier = Modifier
    .background(...)
    .shadow(elevation = 2.dp)
)

or

Box(
  modifier = Modifier
    .shadow(elevation = 2.dp)
    .background(...)
)

? The last should behave as

Surface

, because

Surface

is literally a Box 😄

You are right , the last one is behaving similar to surface where as the first one is adding more visible elevation(but on all sides)