Text-opacity

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

Syntax

text-opacity: <number> | <percentage>;

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.

Outputtext_opacity.pytext_opacity.css

from textual.app import App
from textual.widgets import Label


class TextOpacityApp(App):
    def compose(self):
        yield Label("text-opacity: 0%", id="zero-opacity")
        yield Label("text-opacity: 25%", id="quarter-opacity")
        yield Label("text-opacity: 50%", id="half-opacity")
        yield Label("text-opacity: 75%", id="three-quarter-opacity")
        yield Label("text-opacity: 100%", id="full-opacity")


app = TextOpacityApp(css_path="text_opacity.css")

#zero-opacity {
    text-opacity: 0%;
}

#quarter-opacity {
    text-opacity: 25%;
}

#half-opacity {
    text-opacity: 50%;
}

#three-quarter-opacity {
    text-opacity: 75%;
}

#full-opacity {
    text-opacity: 100%;
}

Label {
    height: 1fr;
    width: 100%;
    text-align: center;
    text-style: bold;
}

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.