Skip to content

[PyQt5] How to gradient render components in different colors

Last Updated on 2021-03-11 by Clay


Introduction

Recently, I always develop mobile App by Flutter. In the process of my development, I found that gradient rendering components can make the interface look better.

So I start to think, how do I do it in desktop application development by PyQt5?

After I researching, I found a easy method to do it. And I recorded it in below.


Qlineargradient

If you don't talk about more complicated rendering way, just use setStyleSheet to set qlineargradient parameter.

For example there is a button:

we can set its StyleSheet to the following:

x1, y1, x2, and y2 is a simple position settings about the rendering position.I just use two colors to render.

Output:


Sample code

The following is the code for my simple test to change the component's color. Maybe you can refer to it.

The first file is the interface gradient.py.

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'gradient.ui'
#
# Created by: PyQt5 UI code generator 5.13.0
#
# WARNING! All changes made in this file will be lost!


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(834, 299)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(230, 30, 331, 111))
        font = QtGui.QFont()
        font.setFamily("Arial")
        font.setPointSize(12)
        font.setBold(True)
        font.setWeight(75)
        self.pushButton.setFont(font)
        self.pushButton.setStyleSheet("")
        self.pushButton.setObjectName("pushButton")
        self.horizontalSlider = QtWidgets.QSlider(self.centralwidget)
        self.horizontalSlider.setGeometry(QtCore.QRect(100, 200, 160, 22))
        self.horizontalSlider.setOrientation(QtCore.Qt.Horizontal)
        self.horizontalSlider.setObjectName("horizontalSlider")
        self.lineEdit = QtWidgets.QLineEdit(self.centralwidget)
        self.lineEdit.setGeometry(QtCore.QRect(300, 200, 51, 22))
        self.lineEdit.setLayoutDirection(QtCore.Qt.LeftToRight)
        self.lineEdit.setLocale(QtCore.QLocale(QtCore.QLocale.Chinese, QtCore.QLocale.Taiwan))
        self.lineEdit.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter)
        self.lineEdit.setObjectName("lineEdit")
        self.label = QtWidgets.QLabel(self.centralwidget)
        self.label.setGeometry(QtCore.QRect(280, 200, 16, 22))
        font = QtGui.QFont()
        font.setFamily("Arial")
        font.setPointSize(12)
        font.setBold(True)
        font.setWeight(75)
        self.label.setFont(font)
        self.label.setObjectName("label")
        self.color_1 = QtWidgets.QLabel(self.centralwidget)
        self.color_1.setGeometry(QtCore.QRect(10, 200, 80, 80))
        self.color_1.setText("")
        self.color_1.setObjectName("color_1")
        self.horizontalSlider_2 = QtWidgets.QSlider(self.centralwidget)
        self.horizontalSlider_2.setGeometry(QtCore.QRect(100, 230, 160, 22))
        self.horizontalSlider_2.setOrientation(QtCore.Qt.Horizontal)
        self.horizontalSlider_2.setObjectName("horizontalSlider_2")
        self.label_3 = QtWidgets.QLabel(self.centralwidget)
        self.label_3.setGeometry(QtCore.QRect(280, 230, 16, 22))
        font = QtGui.QFont()
        font.setFamily("Arial")
        font.setPointSize(12)
        font.setBold(True)
        font.setWeight(75)
        self.label_3.setFont(font)
        self.label_3.setObjectName("label_3")
        self.lineEdit_2 = QtWidgets.QLineEdit(self.centralwidget)
        self.lineEdit_2.setGeometry(QtCore.QRect(300, 230, 51, 22))
        self.lineEdit_2.setLayoutDirection(QtCore.Qt.LeftToRight)
        self.lineEdit_2.setLocale(QtCore.QLocale(QtCore.QLocale.Chinese, QtCore.QLocale.Taiwan))
        self.lineEdit_2.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter)
        self.lineEdit_2.setObjectName("lineEdit_2")
        self.horizontalSlider_3 = QtWidgets.QSlider(self.centralwidget)
        self.horizontalSlider_3.setGeometry(QtCore.QRect(100, 260, 160, 22))
        self.horizontalSlider_3.setOrientation(QtCore.Qt.Horizontal)
        self.horizontalSlider_3.setObjectName("horizontalSlider_3")
        self.label_4 = QtWidgets.QLabel(self.centralwidget)
        self.label_4.setGeometry(QtCore.QRect(280, 260, 16, 22))
        font = QtGui.QFont()
        font.setFamily("Arial")
        font.setPointSize(12)
        font.setBold(True)
        font.setWeight(75)
        self.label_4.setFont(font)
        self.label_4.setObjectName("label_4")
        self.lineEdit_3 = QtWidgets.QLineEdit(self.centralwidget)
        self.lineEdit_3.setGeometry(QtCore.QRect(300, 260, 51, 22))
        self.lineEdit_3.setLayoutDirection(QtCore.Qt.LeftToRight)
        self.lineEdit_3.setLocale(QtCore.QLocale(QtCore.QLocale.Chinese, QtCore.QLocale.Taiwan))
        self.lineEdit_3.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter)
        self.lineEdit_3.setObjectName("lineEdit_3")
        self.label_5 = QtWidgets.QLabel(self.centralwidget)
        self.label_5.setGeometry(QtCore.QRect(740, 230, 16, 22))
        font = QtGui.QFont()
        font.setFamily("Arial")
        font.setPointSize(12)
        font.setBold(True)
        font.setWeight(75)
        self.label_5.setFont(font)
        self.label_5.setObjectName("label_5")
        self.color_2 = QtWidgets.QLabel(self.centralwidget)
        self.color_2.setGeometry(QtCore.QRect(470, 200, 80, 80))
        self.color_2.setText("")
        self.color_2.setObjectName("color_2")
        self.horizontalSlider_5 = QtWidgets.QSlider(self.centralwidget)
        self.horizontalSlider_5.setGeometry(QtCore.QRect(560, 230, 160, 22))
        self.horizontalSlider_5.setOrientation(QtCore.Qt.Horizontal)
        self.horizontalSlider_5.setObjectName("horizontalSlider_5")
        self.horizontalSlider_6 = QtWidgets.QSlider(self.centralwidget)
        self.horizontalSlider_6.setGeometry(QtCore.QRect(560, 260, 160, 22))
        self.horizontalSlider_6.setOrientation(QtCore.Qt.Horizontal)
        self.horizontalSlider_6.setObjectName("horizontalSlider_6")
        self.lineEdit_4 = QtWidgets.QLineEdit(self.centralwidget)
        self.lineEdit_4.setGeometry(QtCore.QRect(760, 260, 51, 22))
        self.lineEdit_4.setLayoutDirection(QtCore.Qt.LeftToRight)
        self.lineEdit_4.setLocale(QtCore.QLocale(QtCore.QLocale.Chinese, QtCore.QLocale.Taiwan))
        self.lineEdit_4.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter)
        self.lineEdit_4.setObjectName("lineEdit_4")
        self.horizontalSlider_4 = QtWidgets.QSlider(self.centralwidget)
        self.horizontalSlider_4.setGeometry(QtCore.QRect(560, 200, 160, 22))
        self.horizontalSlider_4.setOrientation(QtCore.Qt.Horizontal)
        self.horizontalSlider_4.setObjectName("horizontalSlider_4")
        self.lineEdit_5 = QtWidgets.QLineEdit(self.centralwidget)
        self.lineEdit_5.setGeometry(QtCore.QRect(760, 230, 51, 22))
        self.lineEdit_5.setLayoutDirection(QtCore.Qt.LeftToRight)
        self.lineEdit_5.setLocale(QtCore.QLocale(QtCore.QLocale.Chinese, QtCore.QLocale.Taiwan))
        self.lineEdit_5.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter)
        self.lineEdit_5.setObjectName("lineEdit_5")
        self.label_7 = QtWidgets.QLabel(self.centralwidget)
        self.label_7.setGeometry(QtCore.QRect(740, 200, 16, 22))
        font = QtGui.QFont()
        font.setFamily("Arial")
        font.setPointSize(12)
        font.setBold(True)
        font.setWeight(75)
        self.label_7.setFont(font)
        self.label_7.setObjectName("label_7")
        self.label_8 = QtWidgets.QLabel(self.centralwidget)
        self.label_8.setGeometry(QtCore.QRect(740, 260, 16, 22))
        font = QtGui.QFont()
        font.setFamily("Arial")
        font.setPointSize(12)
        font.setBold(True)
        font.setWeight(75)
        self.label_8.setFont(font)
        self.label_8.setObjectName("label_8")
        self.lineEdit_6 = QtWidgets.QLineEdit(self.centralwidget)
        self.lineEdit_6.setGeometry(QtCore.QRect(760, 200, 51, 22))
        self.lineEdit_6.setLayoutDirection(QtCore.Qt.LeftToRight)
        self.lineEdit_6.setLocale(QtCore.QLocale(QtCore.QLocale.Chinese, QtCore.QLocale.Taiwan))
        self.lineEdit_6.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter)
        self.lineEdit_6.setObjectName("lineEdit_6")
        self.line = QtWidgets.QFrame(self.centralwidget)
        self.line.setGeometry(QtCore.QRect(400, 200, 20, 81))
        self.line.setFrameShape(QtWidgets.QFrame.VLine)
        self.line.setFrameShadow(QtWidgets.QFrame.Sunken)
        self.line.setObjectName("line")
        MainWindow.setCentralWidget(self.centralwidget)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.pushButton.setText(_translate("MainWindow", "TEST BUTTON"))
        self.lineEdit.setText(_translate("MainWindow", "0"))
        self.label.setText(_translate("MainWindow", "R"))
        self.label_3.setText(_translate("MainWindow", "G"))
        self.lineEdit_2.setText(_translate("MainWindow", "0"))
        self.label_4.setText(_translate("MainWindow", "B"))
        self.lineEdit_3.setText(_translate("MainWindow", "0"))
        self.label_5.setText(_translate("MainWindow", "G"))
        self.lineEdit_4.setText(_translate("MainWindow", "0"))
        self.lineEdit_5.setText(_translate("MainWindow", "0"))
        self.label_7.setText(_translate("MainWindow", "R"))
        self.label_8.setText(_translate("MainWindow", "B"))
        self.lineEdit_6.setText(_translate("MainWindow", "0"))


This is converted from the interface drawn by Qt Designer via PyUIC.

The following code is about program function.

# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import *
from gradient import Ui_MainWindow


class MainWindow(QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)

        # Display color
        self.ui.color_1.setStyleSheet('background-color: rgb(0, 0, 0);')
        self.ui.color_2.setStyleSheet('background-color: rgb(0, 0, 0);')

        # HorizontalSlider
        self.ui.horizontalSlider.setMaximum(255)
        self.ui.horizontalSlider_2.setMaximum(255)
        self.ui.horizontalSlider_3.setMaximum(255)
        self.ui.horizontalSlider_4.setMaximum(255)
        self.ui.horizontalSlider_5.setMaximum(255)
        self.ui.horizontalSlider_6.setMaximum(255)

        self.ui.horizontalSlider.valueChanged.connect(lambda: self.color_value('R1'))
        self.ui.horizontalSlider_2.valueChanged.connect(lambda: self.color_value('G1'))
        self.ui.horizontalSlider_3.valueChanged.connect(lambda: self.color_value('B1'))
        self.ui.horizontalSlider_4.valueChanged.connect(lambda: self.color_value('R2'))
        self.ui.horizontalSlider_5.valueChanged.connect(lambda: self.color_value('G2'))
        self.ui.horizontalSlider_6.valueChanged.connect(lambda: self.color_value('B2'))

    def color_value(self, color):
        if color == 'R1':
            self.ui.lineEdit.setText(str(self.ui.horizontalSlider.value()))
        elif color == 'G1':
            self.ui.lineEdit_2.setText(str(self.ui.horizontalSlider_2.value()))
        elif color == 'B1':
            self.ui.lineEdit_3.setText(str(self.ui.horizontalSlider_3.value()))
        elif color == 'R2':
            self.ui.lineEdit_4.setText(str(self.ui.horizontalSlider_4.value()))
        elif color == 'G2':
            self.ui.lineEdit_5.setText(str(self.ui.horizontalSlider_5.value()))
        elif color == 'B2':
            self.ui.lineEdit_6.setText(str(self.ui.horizontalSlider_6.value()))

        self.color_change()

    def color_change(self):
        self.newR1 = int(self.ui.lineEdit.text())
        self.newG1 = int(self.ui.lineEdit_2.text())
        self.newB1 = int(self.ui.lineEdit_3.text())
        self.ui.color_1.setStyleSheet('background-color: rgb({}, {}, {});'.format(
            self.newR1,
            self.newG1,
            self.newB1
        ))
        self.newR2 = int(self.ui.lineEdit_4.text())
        self.newG2 = int(self.ui.lineEdit_5.text())
        self.newB2 = int(self.ui.lineEdit_6.text())
        self.ui.color_2.setStyleSheet('background-color: rgb({}, {}, {});'.format(
            self.newR2,
            self.newG2,
            self.newB2
        ))

        self.gradient_color_button()

    def gradient_color_button(self):
        self.ui.pushButton.setStyleSheet('background-color: '
                                         'qlineargradient('
                                         'spread:'
                                         'pad, x1:0, y1:0.5, x2:1, y2:0.5,'
                                         'stop:0 rgb({}, {}, {}),'
                                         'stop:1 rgb({}, {}, {}));'.format(self.newR1,
                                                                           self.newG1,
                                                                           self.newB1,
                                                                           self.newR2,
                                                                           self.newG2,
                                                                           self.newB2))


if __name__ == '__main__':
    app = QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


Output:

You can choose any color you want and try it to see how it works.

More related tutorial can be seen on the website https://www.learnpyqt.com/widgets/gradient/. I recently discovered that this website teaches many interesting interface applications, such as the function of visualizing music. They are all fun and I recommend them.

Leave a Reply