Skip to content

Text-opacity

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

Syntax

text-opacity: <FRACTIONAL>;

Values

As a fractional property, text-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, increasing text-opacity values.

from textual.app import App
from textual.widgets import Static


class TextOpacityApp(App):
    def compose(self):
        yield Static("text-opacity: 0%", id="zero-opacity")
        yield Static("text-opacity: 25%", id="quarter-opacity")
        yield Static("text-opacity: 50%", id="half-opacity")
        yield Static("text-opacity: 75%", id="three-quarter-opacity")
        yield Static("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%;
}

Static {
    height: 1fr;
    text-align: center;
    text-style: bold;
}

TextOpacityApp                                text-opacity: 25%                                                                text-opacity: 50%                                                                text-opacity: 75%                                                                text-opacity: 100%                               

CSS

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

Python

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