---
title: "Conditional: grayscale"
description: An element loses its color while a condition is true.
---

Grayscale drains the color from an element while a condition holds and brings it back when it ends. It is the "disabled" or "unavailable" look: an expired card, a sold-out product, an offline device.

## Usage

The sample grays out a payment card once it has expired.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.jantursky.kapow.ConditionalEffect
import com.jantursky.kapow.conditionalEffect

@Composable
fun PaymentCard(expired: Boolean) {
    Box(
        Modifier
            .size(width = 230.dp, height = 130.dp)
            .conditionalEffect(expired, ConditionalEffect.grayscale())
            .background(Color(0xFFFF6B5A), RoundedCornerShape(16.dp)),
    )
}
```

## Parameters

| Parameter | Default | Description |
| --- | --- | --- |
| `amount` | `1f` | How much color is taken away, from 0 (none) to 1 (fully gray). |
| `tint` | `null` | A color the remaining colors are multiplied by, such as a brown for a sepia look. Null leaves them as they are. |
| `dim` | `0f` | How much the element darkens, from 0 to 1. |

## Reduced motion

The color goes and comes back at once, without the fade.

## Notes

- The change fades in and out over 0.3 s, or over the time set with `fadeIn(...)` and `fadeOut(...)`.
- The element is drawn into a graphics layer of its own with a color-matrix filter. The modifier only affects what is drawn after it in the chain and the element's children, so put it before `background` and the content you want grayed.
- Grayscale only changes the look. Disable input yourself, for example with `enabled = false` on the control.

## Live example

<iframe class="live-example" src="https://kapow-demo.vercel.app/#conditional-grayscale" title="Live example: conditional-grayscale" loading="lazy" allow="autoplay"></iframe>