Skip to content


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


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.


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

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

from 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;


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


# 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.