We just launched Compose Examples featuring over 150+ components! Check it out →

shadow

Common

Modifier in Compose Ui

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.

Usage of this API renders this composable into a separate graphics layer

Last updated:

Installation

dependencies {
   implementation("androidx.compose.ui:ui:1.8.0-alpha04")
}

Overloads

@Deprecated(
    "Replace with shadow which accepts ambientColor and spotColor parameters",
    ReplaceWith(
        "Modifier.shadow(elevation, shape, clip, DefaultShadowColor, DefaultShadowColor)",
        "androidx.compose.ui.draw"
    ),
    DeprecationLevel.HIDDEN
)
@Stable
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
fun ShadowSample() {
    Box(Modifier.shadow(12.dp, RectangleShape).size(100.dp, 100.dp))
}
by @alexstyl