---
title: "ElevationOverlay"
description: "An ElevationOverlay is an overlay applied to the background color of [Surface] components, used
to emphasize elevation in dark theme, where shadows are not as visible. An ElevationOverlay does
not replace the shadows drawn by a [Surface], but is used as an additional representation of
elevation.

The default ElevationOverlay only applies in dark theme (![Colors.isLight]), in accordance with
the Material specification for
[Dark Theme](https://material.io/design/color/dark-theme.html#properties).

See [LocalElevationOverlay] to provide your own [ElevationOverlay]. You can provide `null` to
have no ElevationOverlay applied."
type: "interface"
---

<div class='type'>Interface</div>


<a id='references'></a>

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



```kotlin
interface ElevationOverlay
```


An ElevationOverlay is an overlay applied to the background color of `Surface` components, used
to emphasize elevation in dark theme, where shadows are not as visible. An ElevationOverlay does
not replace the shadows drawn by a `Surface`, but is used as an additional representation of
elevation.

The default ElevationOverlay only applies in dark theme (!`Colors.isLight`), in accordance with
the Material specification for
`Dark Theme`(https://material.io/design/color/dark-theme.html#properties).

See `LocalElevationOverlay` to provide your own `ElevationOverlay`. You can provide `null` to
have no ElevationOverlay applied.


## Functions

```kotlin
@Composable fun apply(color: Color, elevation: Dp): Color
```


Returns the new background `Color` to use, representing the original background `color` with
an overlay corresponding to `elevation` applied. Typically this should only be applied to
`Colors.surface`.