Opacity

The opacity property sets the opacity/transparency of a widget.

Syntax

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

The opacity of a widget 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.

Values

<number>

--8<-- "docs/snippets/type_syntax/number.md" The value of <number> is clamped between 0 and 1.

<percentage>

--8<-- "docs/snippets/type_syntax/percentage.md" The value of <percentage> is clamped between 0% and 100%.

Example

This example shows, from top to bottom, increasing opacity values for a label with a border and some text. When the opacity is zero, all we see is the (black) background.

=== "opacity.py"

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

=== "opacity.css"

```scss
--8<-- "docs/examples/styles/opacity.css"
```

=== "Output"

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

CSS

/* Fade the widget to 50% against its parent's background */
Widget {
    opacity: 50%;
}

Python

# Fade the widget to 50% against its parent's background
widget.styles.opacity = "50%"

1.6 KiB Raw Blame History