textual/docs/styles/text_opacity.md

Text-opacity

The text-opacity style blends the color of the content of a widget with the color of the background.

Syntax

--8<-- "docs/snippets/syntax_block_start.md" text-opacity: <number> | <percentage>; --8<-- "docs/snippets/syntax_block_end.md"

The text opacity can be set as a <number> or a <percentage>. 0/0% means no opacity, which is equivalent to full transparency. Conversely, 1/100% means full opacity, which is equivalent to no transparency. Values outside of these ranges will be clamped.

Example

This example shows, from top to bottom, increasing text-opacity values.

=== "Output"

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

=== "text_opacity.py"

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

=== "text_opacity.css"

```sass hl_lines="2 6 10 14 18"
--8<-- "docs/examples/styles/text_opacity.css"
```

CSS

/* Set the text to be "half-faded" against the background of the widget */
text-opacity: 50%;

Python

# Set the text to be "half-faded" against the background of the widget
widget.styles.text_opacity = "50%"

See also

• opacity to specify the transparency of a whole widget.