Question

I need to know if it is at all possible to set a background color with an overlapping gradient on a QPushButton. I’ve created a round button with an SVG image as it’s icon (which is just a white image showing an exclamation mark and a white border). I need the background of the button to be black, and when toggled I need it to display a radial gradient over the black background. The situation I have now just replaces the black background with the gradient:

The stylesheet I use is as follows:

QPushButton{
    background: black;
    border-radius: 25;
    border-color: gray;
}

#alertButton::checked{
    background-color: qradialgradient(cx: 0.5, cy: 0.5, radius: 2, fx: 0.5, fy: 1, stop: 0 rgba(255,30,30,255), stop: 0.2 rgba(255,30,30,144), stop: 0.4 rgba(255,30,30,32));
}

So, would it be possible to place the gradient over the black background, instead of it replacing it? If possible by doing this in the stylesheet.

Answer 1

You could just adapt the gradient to go from the gradient’s color to the background color to have the same effect. So instead of going from red to white, go from red to black.