Color gradient on text

superaga

Hi experts!

I need to color a text with a gradient.
To achieve this I thought to apply a custom stylesheet to my widget as explained in the docs.
I've been able to change the text size, font and color too, but I couldn't apply a color gradient.

...
...
txb_title.setText("Text with gradient")
txb_title.setStyleSheet(
"QLabel { \
    font-size: 40px; \
    font-family: Helvetica-Light; \
    color: white;}"
)
...
...

I saw that there are some examples that use the QLinearGradient through the
paintEvent but I think that for a such small thing I think that I can avoid to re-implement the QLabel class, isn't it?

This example looks that works just on the background, is there a reason why I can't make it work on the text color ?

The closest code that in a certain way looked working is:

...
txb_title.setStyleSheet(
"QLabel { \
    font-size: 40px; \
    font-family: Helvetica-Light; \
    color: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #ff0000, stop:1 #00007f);}"
)
...

Which looks that doesn't pick-up the first color. The text just takes the stop:1 color.

Anyone knows how to do it?

Many thanks!
AGA

JoeCFD

@superaga 50 is only a ref number for you. Set this number with your text width. And your text has to be in this box, I guess. If your label is longer than 50 and your text is aligned to the right, you will not be able to see the gradient.

JoeCFD

@superaga your box size [0,0] [1,1], only one pixel? I set x2:50, y2:50 and it works on Ubuntu 18.04 with Qt 5.15.2.

superaga

Hi @JoeCFD,

thanks for your quick answer!
I though that was related to the range 0 - 100% like explained here.
All these examples work with this principle.

Anyway, I tried to update my code as follow but still doesn't work:

txb_title.setStyleSheet(
    "QLabel { \
    font-size: 40px; \
    font-family: Helvetica-Light; \
    color: qlineargradient(x1:0, y1:0, x2:50, y2:50, stop:0 #ff0000, stop:1 #0000ff);\
    }"
)

I'm using Win 10, Python 3.11.2 and PyQt 6.4.2

Thanks!

JonB

@superaga
What type is txb_title? Some sort of "text box" or a label?

superaga

Hi @JonB,

yes it is a QLabel

Here the complete code:

txb_title = QLabel(splash_scr)
txb_title.setGeometry(0, int(splash_screen_height / 2), splash_screen_width, 30)
txb_title.setAlignment(
        Qt.AlignmentFlag.AlignVCenter | Qt.AlignmentFlag.AlignHCenter
    )
txb_title.setText("Text with gradient")
txb_title.setStyleSheet(
    "QLabel { \
    font-size: 40px; \
    font-family: Helvetica-Light; \
    color: qlineargradient(x1:0, y1:0, x2:50, y2:50, stop:0 #ff0000, stop:1 #0000ff);\
    }"
)

I need to show some text on the QSplashscreen.

JonB

@superaga Yes, sorry, I just wondered if it was not a QLabel from the name!

JoeCFD

@superaga 50 is only a ref number for you. Set this number with your text width. And your text has to be in this box, I guess. If your label is longer than 50 and your text is aligned to the right, you will not be able to see the gradient.

superaga

Hi @JoeCFD,

Many thanks for the hint! I couldn't find the documentation related to this.
Could you please point me to it?

I just changed my code to:

...
color: qlineargradient(x1:0, y1:0, x2:0, y2:30, stop:0 #ff0000, stop:1 #0000ff);
...
txb_title.setGeometry(0, int(splash_screen_height / 2), splash_screen_width, 30)
...

Where values of setGeometry are:

ax : 0
ay : 216
aw : 648
ah : 30

To see if the gradient applied to the y coordinate and it did.

I then tried to apply it to the x axis using:

...
color: qlineargradient(x1:0, y1:0, x2:648, y2:0, stop:0 #ff0000, stop:1 #0000ff);
...

And worked as well.

So my understanding is that the qlineargradient needs to match its widget geometry.
Of course you can still change these "start" and "stop" coordinates to affect the gradient "start" before or after the widget (reference to its "0,0" position).

I think that my issue fell in that case.

I then also tried to add a third stop as:

color: qlineargradient(x1:0, y1:0, x2:324, y2:0, x3:648, y3:0 stop:0 #ff0000, stop:1 #00ff00, stop:2 #0000ff);

but didn't work:

Do you know if this is possible?

Here just few example to clarify to anyone would need it.

Linear gradient on y axis:

...
color: qlineargradient(x1:0, y1:0, x2:0, y2:30, stop:0 #ff0000, stop:1 #0000ff);
...

Linear gradient on x axis:

...
color: qlineargradient(x1:0, y1:0, x2:648, y2:0, stop:0 #ff0000, stop:1 #0000ff);
...

@JonB no problem at all.

Thanks!
AGA

JoeCFD

@superaga said in Color gradient on text:

qlineargradient

https://stackoverflow.com/questions/20196282/qlineargradient-horizontal-vertical

superaga

Hi @JoeCFD,

this is related to the QLinearGradient class instead of the [QT Style Sheet](Qt Style Sheets).
The official documentation (regarding this qlineargradient) states that there are only 2 stop points, that's why with the third didn't work.

Anyway many thanks for your help! I can then close here this thread.

Kind regards,
AGA

JoeCFD

@superaga It makes sense. A linear gradient needs only 2 points. Good you fixed the issue.