textual/docs/styles/opacity.md

Opacity

The opacity property can be used to make a widget partially or fully transparent.

Syntax

opacity: <FRACTIONAL>;

Values

As a fractional property, opacity can be set to either a float (between 0 and 1), or a percentage, e.g. 45%. Float values will be clamped between 0 and 1. Percentage values will be clamped between 0% and 100%.

Example

This example shows, from top to bottom, increase opacity values.

=== "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

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

Python

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