textual/docs/styles/tint.md

Tint

The tint rule blends a color with the whole widget.

Syntax

--8<-- "docs/snippets/syntax_block_start.md" tint: <color> [<percentage>]; --8<-- "docs/snippets/syntax_block_end.md"

The tint rule blends a <color> with the widget. The color should likely have an alpha component (specified directly in the color used or by the optional <percentage>), otherwise the end result will obscure the widget content.

Example

This examples shows a green tint with gradually increasing alpha.

=== "tint.py"

```python
--8<-- "docs/examples/styles/tint.py"
```

=== "tint.css"

```sass
--8<-- "docs/examples/styles/tint.css"
```

=== "Output"

```{.textual path="docs/examples/styles/tint.py"}
```

CSS

/* A red tint (could indicate an error) */
tint: red 20%

/* A green tint */
tint: rgba(0, 200, 0, 0.3);

Python

# A red tint
from textual.color import Color
widget.styles.tint = Color.parse("red").with_alpha(0.2);

# A green tint
widget.styles.tint = "rgba(0, 200, 0, 0.3)"