Important: Please read the Qt Code of Conduct -

Qt Gradient stylesheet not applying

  • Has anybody used this tool? "Ultimate CSS Gradient Generator":

    There is a "plug-in": available for firefox, which will enable you to generate a stylehseet in the Qt environment. I have been not succesful at implementing this. Every time I insert the style-sheet in Qt Designer and click apply no changes are applied.

    Qt Designer is good for generating basic gradients, however if this tool works, I'd be really great. I want to know if there is a syntax error.

    Here is one example of a style-sheet being generated by the tool:
    @background: qlineargradient(-45deg, stop: 0 rgba(169,228,247,1), stop: 1 rgba(15,180,231,1));@

  • Hi, ~kchandr7!

    I think that Qt Designer Gradient Generator Tool cannot have any syntax bugs. So, mostly, you have an error somewhere.

  • i have not much experience on css for qt,
    but as far as i know, rotated linear gradient is not supported in qss.

    how about removing "-45deg" in css like,
    background: qlineargradient(stop: 0 rgba(169,228,247,1), stop: 1 rgba(15,180,231,1));

  • I didnt' mean to say that style sheet was throwing syntax bugs on compiling. What I meant to say that the stylesheet had no effect on the widget.

    Also, I tried the removing the -45deg but still no change :(

  • ok,, maybe i got it, alpha value was too small,
    with "rgba(15,180,231,1)",,, last "1" is not "1.0", it denotes "1/256" alpha value

    background: qlineargradient(stop: 0 rgba(169,228,247,255), stop: 1 rgba(15,180,231,255));

    and my bad,, rotated linear gradient is supported by using x1, y1, x2, y2 - syntax.

    background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
    stop:0 white, stop: 0.4 rgba(10, 20, 30, 40), stop:1 rgb(0, 200, 230, 200))

    good luck.

  • Thanks! That worked. That was ignorant of me not seeing the alpha value!

  • Just a heads up, you might want to tag the style sheet in brackets for the object you are targeting as well so all of the objects within the target object to not inherit the style sheet as well.

    So like this:
    #objectName {
    border: 1px solid black;
    border-radius: 5px;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #9dd53a, stop: .5 #a1d54f, stop: .51 #80c217, stop: 1 #7cbc0a);

    Good luck!

  • Thanks, I learned that the hard way. I saw all my other objects in the widget inheriting the style and found it really annoying. I guess I will have to eventually to move all the sytlesheets in the parent widget and include the brackets and the appropriate object name to address them induvidually.

  • Thanks @vezprog, it worked very fine.

Log in to reply