New Compose Multiplatform components arrived on Composables UICheck it out →

Modifier in Compose Ui

shadow

Common

Creates a [graphicsLayer] that draws a shadow. The [elevation] defines the visual depth of the physical object. The physical object has a shape specified by [shape].

If the passed [shape] is concave the shadow will not be drawn on Android versions less than 10.

Note that [elevation] is only affecting the shadow size and doesn't change the drawing order. Use a [androidx.compose.ui.zIndex] modifier if you want to draw the elements with larger [elevation] after all the elements with a smaller one.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.ui:ui:1.7.0-beta04")
}

Overloads

@Stable
@Deprecated(
    "Replace with shadow which accepts ambientColor and spotColor parameters",
    ReplaceWith(
        "Modifier.shadow(elevation, shape, clip, DefaultShadowColor, DefaultShadowColor)",
        "androidx.compose.ui.draw"
    ),
    DeprecationLevel.HIDDEN

fun Modifier.shadow(
    elevation: Dp,
    shape: Shape = RectangleShape,
    clip: Boolean = elevation > 0.dp
)

Parameters

namedescription
elevationThe elevation for the shadow in pixels
shapeDefines a shape of the physical object
clipWhen active, the content drawing clips to the shape.
@Stable
fun Modifier.shadow(
    elevation: Dp,
    shape: Shape = RectangleShape,
    clip: Boolean = elevation > 0.dp,
    ambientColor: Color = DefaultShadowColor,
    spotColor: Color = DefaultShadowColor,
)

Parameters

namedescription
elevationThe elevation for the shadow in pixels
shapeDefines a shape of the physical object
clipWhen active, the content drawing clips to the shape.
ambientColorColor of the ambient shadow drawn when [elevation] > 0f
spotColorColor of the spot shadow that is drawn when [elevation] > 0f

Code Example

ShadowSample

@Composable
@Sampled
fun ShadowSample() {
    Box(
        Modifier.shadow(12.dp, RectangleShape)
            .size(100.dp, 100.dp)
    )
}