---
title: "graphicsLayer"
description: "A [Modifier.Element] that makes content draw into a draw layer. The draw layer can be invalidated
separately from parents. A [graphicsLayer] should be used when the content updates independently
from anything above it to minimize the invalidated content.

[graphicsLayer] can also be used to apply effects to content, such as scaling ([scaleX],
[scaleY]), rotation ([rotationX], [rotationY], [rotationZ]), opacity ([alpha]), shadow
([shadowElevation], [shape]), and clipping ([clip], [shape]).

Note that if you provide a non-zero [shadowElevation] and if the passed [shape] is concave the
shadow will not be drawn on Android versions less than 10.

Also note that alpha values less than 1.0f will have their contents implicitly clipped to their
bounds. This is because an intermediate compositing layer is created to render contents into
first before being drawn into the destination with the desired alpha. This layer is sized to the
bounds of the composable this modifier is configured on, and contents outside of these bounds are
omitted.

If the layer parameters are backed by a [androidx.compose.runtime.State] or an animated value
prefer an overload with a lambda block on [GraphicsLayerScope] as reading a state inside the
block will only cause the layer properties update without triggering recomposition and relayout."
type: "modifier"
---

<div class='type'>Compose Modifier</div>

<a id='references'></a>
<div class='sourceset sourceset-common'>Common</div>


> **Deprecated** Replace with graphicsLayer that consumes an optional RenderEffect parameter and shadow color parameters

```kotlin
fun Modifier.graphicsLayer(
    scaleX: Float = 1f,
    scaleY: Float = 1f,
    alpha: Float = 1f,
    translationX: Float = 0f,
    translationY: Float = 0f,
    shadowElevation: Float = 0f,
    rotationX: Float = 0f,
    rotationY: Float = 0f,
    rotationZ: Float = 0f,
    cameraDistance: Float = DefaultCameraDistance,
    transformOrigin: TransformOrigin = TransformOrigin.Center,
    shape: Shape = RectangleShape,
    clip: Boolean = false,
) =
    graphicsLayer(
        scaleX = scaleX,
        scaleY = scaleY,
        alpha = alpha,
        translationX = translationX,
        translationY = translationY,
        shadowElevation = shadowElevation,
        rotationX = rotationX,
        rotationY = rotationY,
        rotationZ = rotationZ,
        cameraDistance = cameraDistance,
        transformOrigin = transformOrigin,
        shape = shape,
        clip = clip,
        renderEffect = null,
        blendMode = BlendMode.SrcOver,
        colorFilter = null,
    )
```


A `Modifier.Element` that makes content draw into a draw layer. The draw layer can be invalidated
separately from parents. A `graphicsLayer` should be used when the content updates independently
from anything above it to minimize the invalidated content.

`graphicsLayer` can also be used to apply effects to content, such as scaling (`scaleX`,
`scaleY`), rotation (`rotationX`, `rotationY`, `rotationZ`), opacity (`alpha`), shadow
(`shadowElevation`, `shape`), and clipping (`clip`, `shape`).

Note that if you provide a non-zero `shadowElevation` and if the passed `shape` is concave the
shadow will not be drawn on Android versions less than 10.

Also note that alpha values less than 1.0f will have their contents implicitly clipped to their
bounds. This is because an intermediate compositing layer is created to render contents into
first before being drawn into the destination with the desired alpha. This layer is sized to the
bounds of the composable this modifier is configured on, and contents outside of these bounds are
omitted.

If the layer parameters are backed by a `androidx.compose.runtime.State` or an animated value
prefer an overload with a lambda block on `GraphicsLayerScope` as reading a state inside the
block will only cause the layer properties update without triggering recomposition and relayout.

#### Parameters

| | |
| --- | --- |
| scaleX | see `GraphicsLayerScope.scaleX` |
| scaleY | see `GraphicsLayerScope.scaleY` |
| alpha | see `GraphicsLayerScope.alpha` |
| translationX | see `GraphicsLayerScope.translationX` |
| translationY | see `GraphicsLayerScope.translationY` |
| shadowElevation | see `GraphicsLayerScope.shadowElevation` |
| rotationX | see `GraphicsLayerScope.rotationX` |
| rotationY | see `GraphicsLayerScope.rotationY` |
| rotationZ | see `GraphicsLayerScope.rotationZ` |
| cameraDistance | see `GraphicsLayerScope.cameraDistance` |
| transformOrigin | see `GraphicsLayerScope.transformOrigin` |
| shape | see `GraphicsLayerScope.shape` |
| clip | see `GraphicsLayerScope.clip` |




<div class='sourceset sourceset-common'>Common</div>


> **Deprecated** Replace with graphicsLayer that consumes shadow color parameters

```kotlin
fun Modifier.graphicsLayer(
    scaleX: Float = 1f,
    scaleY: Float = 1f,
    alpha: Float = 1f,
    translationX: Float = 0f,
    translationY: Float = 0f,
    shadowElevation: Float = 0f,
    rotationX: Float = 0f,
    rotationY: Float = 0f,
    rotationZ: Float = 0f,
    cameraDistance: Float = DefaultCameraDistance,
    transformOrigin: TransformOrigin = TransformOrigin.Center,
    shape: Shape = RectangleShape,
    clip: Boolean = false,
    renderEffect: RenderEffect? = null,
) =
    graphicsLayer(
        scaleX = scaleX,
        scaleY = scaleY,
        alpha = alpha,
        translationX = translationX,
        translationY = translationY,
        shadowElevation = shadowElevation,
        ambientShadowColor = DefaultShadowColor,
        spotShadowColor = DefaultShadowColor,
        rotationX = rotationX,
        rotationY = rotationY,
        rotationZ = rotationZ,
        cameraDistance = cameraDistance,
        transformOrigin = transformOrigin,
        shape = shape,
        clip = clip,
        renderEffect = renderEffect,
        compositingStrategy = CompositingStrategy.Auto,
        blendMode = BlendMode.SrcOver,
        colorFilter = null,
    )
```


A `Modifier.Element` that makes content draw into a draw layer. The draw layer can be invalidated
separately from parents. A `graphicsLayer` should be used when the content updates independently
from anything above it to minimize the invalidated content.

`graphicsLayer` can also be used to apply effects to content, such as scaling (`scaleX`,
`scaleY`), rotation (`rotationX`, `rotationY`, `rotationZ`), opacity (`alpha`), shadow
(`shadowElevation`, `shape`), clipping (`clip`, `shape`), as well as altering the result of the
layer with `RenderEffect`.

Note that if you provide a non-zero `shadowElevation` and if the passed `shape` is concave the
shadow will not be drawn on Android versions less than 10.

Also note that alpha values less than 1.0f will have their contents implicitly clipped to their
bounds. This is because an intermediate compositing layer is created to render contents into
first before being drawn into the destination with the desired alpha. This layer is sized to the
bounds of the composable this modifier is configured on, and contents outside of these bounds are
omitted.

If the layer parameters are backed by a `androidx.compose.runtime.State` or an animated value
prefer an overload with a lambda block on `GraphicsLayerScope` as reading a state inside the
block will only cause the layer properties update without triggering recomposition and relayout.

#### Parameters

| | |
| --- | --- |
| scaleX | see `GraphicsLayerScope.scaleX` |
| scaleY | see `GraphicsLayerScope.scaleY` |
| alpha | see `GraphicsLayerScope.alpha` |
| translationX | see `GraphicsLayerScope.translationX` |
| translationY | see `GraphicsLayerScope.translationY` |
| shadowElevation | see `GraphicsLayerScope.shadowElevation` |
| rotationX | see `GraphicsLayerScope.rotationX` |
| rotationY | see `GraphicsLayerScope.rotationY` |
| rotationZ | see `GraphicsLayerScope.rotationZ` |
| cameraDistance | see `GraphicsLayerScope.cameraDistance` |
| transformOrigin | see `GraphicsLayerScope.transformOrigin` |
| shape | see `GraphicsLayerScope.shape` |
| clip | see `GraphicsLayerScope.clip` |
| renderEffect | see `GraphicsLayerScope.renderEffect` |




<div class='sourceset sourceset-common'>Common</div>


> **Deprecated** Replace with graphicsLayer that consumes a compositing strategy

```kotlin
fun Modifier.graphicsLayer(
    scaleX: Float = 1f,
    scaleY: Float = 1f,
    alpha: Float = 1f,
    translationX: Float = 0f,
    translationY: Float = 0f,
    shadowElevation: Float = 0f,
    rotationX: Float = 0f,
    rotationY: Float = 0f,
    rotationZ: Float = 0f,
    cameraDistance: Float = DefaultCameraDistance,
    transformOrigin: TransformOrigin = TransformOrigin.Center,
    shape: Shape = RectangleShape,
    clip: Boolean = false,
    renderEffect: RenderEffect? = null,
    ambientShadowColor: Color = DefaultShadowColor,
    spotShadowColor: Color = DefaultShadowColor,
) =
    graphicsLayer(
        scaleX,
        scaleY,
        alpha,
        translationX,
        translationY,
        shadowElevation,
        rotationX,
        rotationY,
        rotationZ,
        cameraDistance,
        transformOrigin,
        shape,
        clip,
        renderEffect,
        ambientShadowColor,
        spotShadowColor,
        CompositingStrategy.Auto,
        BlendMode.SrcOver,
        null,
    )
```


A `Modifier.Element` that makes content draw into a draw layer. The draw layer can be invalidated
separately from parents. A `graphicsLayer` should be used when the content updates independently
from anything above it to minimize the invalidated content.

`graphicsLayer` can also be used to apply effects to content, such as scaling (`scaleX`,
`scaleY`), rotation (`rotationX`, `rotationY`, `rotationZ`), opacity (`alpha`), shadow
(`shadowElevation`, `shape`), clipping (`clip`, `shape`), as well as altering the result of the
layer with `RenderEffect`. Shadow color and ambient colors can be modified by configuring the
`spotShadowColor` and `ambientShadowColor` respectively.

Note that if you provide a non-zero `shadowElevation` and if the passed `shape` is concave the
shadow will not be drawn on Android versions less than 10.

Also note that alpha values less than 1.0f will have their contents implicitly clipped to their
bounds. This is because an intermediate compositing layer is created to render contents into
first before being drawn into the destination with the desired alpha. This layer is sized to the
bounds of the composable this modifier is configured on, and contents outside of these bounds are
omitted.

If the layer parameters are backed by a `androidx.compose.runtime.State` or an animated value
prefer an overload with a lambda block on `GraphicsLayerScope` as reading a state inside the
block will only cause the layer properties update without triggering recomposition and relayout.

#### Parameters

| | |
| --- | --- |
| scaleX | see `GraphicsLayerScope.scaleX` |
| scaleY | see `GraphicsLayerScope.scaleY` |
| alpha | see `GraphicsLayerScope.alpha` |
| translationX | see `GraphicsLayerScope.translationX` |
| translationY | see `GraphicsLayerScope.translationY` |
| shadowElevation | see `GraphicsLayerScope.shadowElevation` |
| rotationX | see `GraphicsLayerScope.rotationX` |
| rotationY | see `GraphicsLayerScope.rotationY` |
| rotationZ | see `GraphicsLayerScope.rotationZ` |
| cameraDistance | see `GraphicsLayerScope.cameraDistance` |
| transformOrigin | see `GraphicsLayerScope.transformOrigin` |
| shape | see `GraphicsLayerScope.shape` |
| clip | see `GraphicsLayerScope.clip` |
| renderEffect | see `GraphicsLayerScope.renderEffect` |
| ambientShadowColor | see `GraphicsLayerScope.ambientShadowColor` |
| spotShadowColor | see `GraphicsLayerScope.spotShadowColor` |




<div class='sourceset sourceset-common'>Common</div>


> **Deprecated** Replace with graphicsLayer that consumes a blend mode and a color filter

```kotlin
fun Modifier.graphicsLayer(
    scaleX: Float = 1f,
    scaleY: Float = 1f,
    alpha: Float = 1f,
    translationX: Float = 0f,
    translationY: Float = 0f,
    shadowElevation: Float = 0f,
    rotationX: Float = 0f,
    rotationY: Float = 0f,
    rotationZ: Float = 0f,
    cameraDistance: Float = DefaultCameraDistance,
    transformOrigin: TransformOrigin = TransformOrigin.Center,
    shape: Shape = RectangleShape,
    clip: Boolean = false,
    renderEffect: RenderEffect? = null,
    ambientShadowColor: Color = DefaultShadowColor,
    spotShadowColor: Color = DefaultShadowColor,
    compositingStrategy: CompositingStrategy = CompositingStrategy.Auto,
) =
    graphicsLayer(
        scaleX,
        scaleY,
        alpha,
        translationX,
        translationY,
        shadowElevation,
        rotationX,
        rotationY,
        rotationZ,
        cameraDistance,
        transformOrigin,
        shape,
        clip,
        renderEffect,
        ambientShadowColor,
        spotShadowColor,
        compositingStrategy,
        BlendMode.SrcOver,
        null,
    )
```


A `Modifier.Element` that makes content draw into a draw layer. The draw layer can be invalidated
separately from parents. A `graphicsLayer` should be used when the content updates independently
from anything above it to minimize the invalidated content.

`graphicsLayer` can also be used to apply effects to content, such as scaling (`scaleX`,
`scaleY`), rotation (`rotationX`, `rotationY`, `rotationZ`), opacity (`alpha`), shadow
(`shadowElevation`, `shape`), clipping (`clip`, `shape`), as well as altering the result of the
layer with `RenderEffect`. Shadow color and ambient colors can be modified by configuring the
`spotShadowColor` and `ambientShadowColor` respectively.

`CompositingStrategy` determines whether or not the contents of this layer are rendered into an
offscreen buffer. This is useful in order to optimize alpha usages with
`CompositingStrategy.ModulateAlpha` which will skip the overhead of an offscreen buffer but can
generate different rendering results depending on whether or not the contents of the layer are
overlapping. Similarly leveraging `CompositingStrategy.Offscreen` is useful in situations where
creating an offscreen buffer is preferred usually in conjunction with `BlendMode` usage.

Note that if you provide a non-zero `shadowElevation` and if the passed `shape` is concave the
shadow will not be drawn on Android versions less than 10.

Also note that alpha values less than 1.0f will have their contents implicitly clipped to their
bounds unless `CompositingStrategy.ModulateAlpha` is specified. This is because an intermediate
compositing layer is created to render contents into first before being drawn into the
destination with the desired alpha. This layer is sized to the bounds of the composable this
modifier is configured on, and contents outside of these bounds are omitted.

If the layer parameters are backed by a `androidx.compose.runtime.State` or an animated value
prefer an overload with a lambda block on `GraphicsLayerScope` as reading a state inside the
block will only cause the layer properties update without triggering recomposition and relayout.

#### Parameters

| | |
| --- | --- |
| scaleX | see `GraphicsLayerScope.scaleX` |
| scaleY | see `GraphicsLayerScope.scaleY` |
| alpha | see `GraphicsLayerScope.alpha` |
| translationX | see `GraphicsLayerScope.translationX` |
| translationY | see `GraphicsLayerScope.translationY` |
| shadowElevation | see `GraphicsLayerScope.shadowElevation` |
| rotationX | see `GraphicsLayerScope.rotationX` |
| rotationY | see `GraphicsLayerScope.rotationY` |
| rotationZ | see `GraphicsLayerScope.rotationZ` |
| cameraDistance | see `GraphicsLayerScope.cameraDistance` |
| transformOrigin | see `GraphicsLayerScope.transformOrigin` |
| shape | see `GraphicsLayerScope.shape` |
| clip | see `GraphicsLayerScope.clip` |
| renderEffect | see `GraphicsLayerScope.renderEffect` |
| ambientShadowColor | see `GraphicsLayerScope.ambientShadowColor` |
| spotShadowColor | see `GraphicsLayerScope.spotShadowColor` |
| compositingStrategy | see `GraphicsLayerScope.compositingStrategy` |




<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun Modifier.graphicsLayer(
    scaleX: Float = 1f,
    scaleY: Float = 1f,
    alpha: Float = 1f,
    translationX: Float = 0f,
    translationY: Float = 0f,
    shadowElevation: Float = 0f,
    rotationX: Float = 0f,
    rotationY: Float = 0f,
    rotationZ: Float = 0f,
    cameraDistance: Float = DefaultCameraDistance,
    transformOrigin: TransformOrigin = TransformOrigin.Center,
    shape: Shape = RectangleShape,
    clip: Boolean = false,
    renderEffect: RenderEffect? = null,
    ambientShadowColor: Color = DefaultShadowColor,
    spotShadowColor: Color = DefaultShadowColor,
    compositingStrategy: CompositingStrategy = CompositingStrategy.Auto,
    blendMode: BlendMode = BlendMode.SrcOver,
    colorFilter: ColorFilter? = null,
) =
    this then
        GraphicsLayerElement(
            scaleX,
            scaleY,
            alpha,
            translationX,
            translationY,
            shadowElevation,
            rotationX,
            rotationY,
            rotationZ,
            cameraDistance,
            transformOrigin,
            shape,
            clip,
            renderEffect,
            ambientShadowColor,
            spotShadowColor,
            compositingStrategy,
            blendMode,
            colorFilter,
        )
```


A `Modifier.Element` that makes content draw into a draw layer. The draw layer can be invalidated
separately from parents. A `graphicsLayer` should be used when the content updates independently
from anything above it to minimize the invalidated content.

`graphicsLayer` can also be used to apply effects to content, such as scaling (`scaleX`,
`scaleY`), rotation (`rotationX`, `rotationY`, `rotationZ`), opacity (`alpha`), shadow
(`shadowElevation`, `shape`), clipping (`clip`, `shape`), as well as altering the result of the
layer with `RenderEffect`. Shadow color and ambient colors can be modified by configuring the
`spotShadowColor` and `ambientShadowColor` respectively.

`CompositingStrategy` determines whether or not the contents of this layer are rendered into an
offscreen buffer. This is useful in order to optimize alpha usages with
`CompositingStrategy.ModulateAlpha` which will skip the overhead of an offscreen buffer but can
generate different rendering results depending on whether or not the contents of the layer are
overlapping. Similarly leveraging `CompositingStrategy.Offscreen` is useful in situations where
creating an offscreen buffer is preferred usually in conjunction with `BlendMode` usage.

Note that if you provide a non-zero `shadowElevation` and if the passed `shape` is concave the
shadow will not be drawn on Android versions less than 10.

Also note that alpha values less than 1.0f will have their contents implicitly clipped to their
bounds unless `CompositingStrategy.ModulateAlpha` is specified. This is because an intermediate
compositing layer is created to render contents into first before being drawn into the
destination with the desired alpha. This layer is sized to the bounds of the composable this
modifier is configured on, and contents outside of these bounds are omitted.

If the layer parameters are backed by a `androidx.compose.runtime.State` or an animated value
prefer an overload with a lambda block on `GraphicsLayerScope` as reading a state inside the
block will only cause the layer properties update without triggering recomposition and relayout.

#### Parameters

| | |
| --- | --- |
| scaleX | see `GraphicsLayerScope.scaleX` |
| scaleY | see `GraphicsLayerScope.scaleY` |
| alpha | see `GraphicsLayerScope.alpha` |
| translationX | see `GraphicsLayerScope.translationX` |
| translationY | see `GraphicsLayerScope.translationY` |
| shadowElevation | see `GraphicsLayerScope.shadowElevation` |
| rotationX | see `GraphicsLayerScope.rotationX` |
| rotationY | see `GraphicsLayerScope.rotationY` |
| rotationZ | see `GraphicsLayerScope.rotationZ` |
| cameraDistance | see `GraphicsLayerScope.cameraDistance` |
| transformOrigin | see `GraphicsLayerScope.transformOrigin` |
| shape | see `GraphicsLayerScope.shape` |
| clip | see `GraphicsLayerScope.clip` |
| renderEffect | see `GraphicsLayerScope.renderEffect` |
| ambientShadowColor | see `GraphicsLayerScope.ambientShadowColor` |
| spotShadowColor | see `GraphicsLayerScope.spotShadowColor` |
| compositingStrategy | see `GraphicsLayerScope.compositingStrategy` |
| blendMode | see `GraphicsLayerScope.blendMode` |
| colorFilter | see `GraphicsLayerScope.colorFilter` |




<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun Modifier.graphicsLayer(block: GraphicsLayerScope.() -> Unit): Modifier
```


A `Modifier.Node` that makes content draw into a draw layer. The draw layer can be invalidated
separately from parents. A `graphicsLayer` should be used when the content updates independently
from anything above it to minimize the invalidated content.

`graphicsLayer` can be used to apply effects to content, such as scaling, rotation, opacity,
shadow, and clipping. Prefer this version when you have layer properties backed by a
`androidx.compose.runtime.State` or an animated value as reading a state inside `block` will only
cause the layer properties update without triggering recomposition and relayout.

NOTE: `block` can be invoked multiple times, which is why it's important for performance to
minimize work done inside of it. `block` may also be invoked before effects.

#### Parameters

| | |
| --- | --- |
| block | block on `GraphicsLayerScope` where you define the layer properties. |




## Code Examples
### AnimateFadeIn
```kotlin
@Composable
fun AnimateFadeIn() {
    val animatedAlpha = remember { Animatable(0f) }
    Text(
        "Hello World",
        Modifier.graphicsLayer {
            alpha = animatedAlpha.value
            clip = true
        },
    )
    LaunchedEffect(animatedAlpha) { animatedAlpha.animateTo(1f) }
}
```
### ChangeOpacity
```kotlin
@Composable
fun ChangeOpacity() {
    Text("Hello World", Modifier.graphicsLayer(alpha = 0.5f, clip = true))
}
```
### CompositingStrategyModulateAlpha
```kotlin
@Composable
fun CompositingStrategyModulateAlpha() {
    Canvas(
        modifier =
            Modifier.size(100.dp)
                .background(Color.Black)
                .graphicsLayer(
                    alpha = 0.5f,
                    compositingStrategy = CompositingStrategy.ModulateAlpha,
                )
    ) {
        // Configuring an alpha less than 1.0 and specifying
        // CompositingStrategy.ModulateAlpha ends up with the overlapping region
        // of the 2 draw rect calls to blend transparent blue and transparent red
        // against the black background instead of just transparent blue which is what would
        // occur with CompositingStrategy.Auto or CompositingStrategy.Offscreen
        inset(0f, 0f, size.width / 3, size.height / 3) { drawRect(color = Color.Red) }
        inset(size.width / 3, size.height / 3, 0f, 0f) { drawRect(color = Color.Blue) }
    }
}
```