# Backdrop effects

Backdrop effects are `RenderEffect`s radically. They only take effect with Android 12 and above. Some effects involving with `RuntimeShader` need Android 13 and above.

The order of effects matters. To create the right visual effects, you must apply them with the following order:

<p align="center">color filter ⇒ blur ⇒ lens</p>

## Color filter

### Custom ColorFilter

```kotlin
colorFilter(colorFilter: ColorFilter)
```

### Opacity

```kotlin
opacity(alpha: Float)
```

### Color controls (brightness, contrast, saturation)

```kotlin
colorControls(
    brightness: Float = 0f,
    contrast: Float = 1f,
    saturation: Float = 1f
)
```

<figure><img src="/files/BXmufRxLE1DMMPSNKH7M" alt="" width="375"><figcaption></figcaption></figure>

### Vibrancy

Multiply saturation with 1.5. It is equivalent to `colorControls(saturation = 1.5f)` .

```kotlin
vibrancy()
```

### Exposure adjustment

```kotlin
exposureAdjustment(ev: Float)
```

### Gamma adjustment (Android 13+)

```kotlin
gammaAdjustment(power: Float)
```

## Blur

### Blur effect

```kotlin
blur(
    radius: Float,
    edgeTreatment: TileMode = TileMode.Clamp
)
```

## Lens (Android 13+)

⚠️ To use the lens effect, your `shape` must be `CornerBasedShape` .

### Lens effect

```kotlin
lens(
    refractionHeight: Float,
    refractionAmount: Float = height,
    depthEffect: Boolean = false,
    chromaticAberration: Boolean = false
)
```

* `height` must be in \[0, `shape.minCornerRadius` ]. If it exceeds, it will have discontinuities at some corners, but it's acceptable.
* `amount` must be in \[0, `size.minDimension` ].

<figure><img src="/files/SiBBvzZcXtJZwYUbtwFi" alt="" width="375"><figcaption></figcaption></figure>

<figure><img src="/files/91pEwYZaTO66qSDpUj1o" alt="" width="375"><figcaption></figcaption></figure>

## RenderEffect

### Custom RenderRffect

```kotlin
effect(effect: RenderEffect)
```

```kotlin
runtimeShaderEffect(
    key: String,
    shaderString: String,
    uniformShaderName: String,
    block: RuntimeShader.() -> Unit
)
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kyant.gitbook.io/backdrop/api/backdrop-effects.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.