Skip to content


The tint style blends a color with the whole widget.


The tint style blends a <color> with the widget. The color should likely have an alpha component (specified directly in the color used or by the optional <percentage>), otherwise the end result will obscure the widget content.


This examples shows a green tint with gradually increasing alpha.

TintApp tint: green 0%; tint: green 10%; tint: green 20%; tint: green 30%; tint: green 40%; tint: green 50%; ▄▄ tint: green 60%; tint: green 70%;

from import App
from textual.color import Color
from textual.widgets import Label

class TintApp(App):
    CSS_PATH = "tint.tcss"

    def compose(self):
        color = Color.parse("green")
        for tint_alpha in range(0, 101, 10):
            widget = Label(f"tint: green {tint_alpha}%;")
            widget.styles.tint = color.with_alpha(tint_alpha / 100)  # (1)!
            yield widget

if __name__ == "__main__":
    app = TintApp()
  1. We set the tint to a Color instance with varying levels of opacity, set through the method with_alpha.
Label {
    height: 3;
    width: 100%;
    text-style: bold;
    background: white;
    color: black;
    content-align: center middle;


/* A red tint (could indicate an error) */
tint: red 20%;

/* A green tint */
tint: rgba(0, 200, 0, 0.3);


# A red tint
from textual.color import Color
widget.styles.tint = Color.parse("red").with_alpha(0.2);

# A green tint
widget.styles.tint = "rgba(0, 200, 0, 0.3)"