Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Is it possible to apply gradient on texts?



  • Hi, I was testing around what is possible to do with Qt Design Studio and QML, and was wondering whether if it is possible or not to apply gradients on texts with QML. This is what I was trying after searching a bit for gradients on QML, but probably there is something stupid:

    Text {
                id: element
                text: qsTr("Text")
                font.pixelSize: 12
            }
            LinearGradient {
                id: mask
                anchors.fill: element
                start: Qt.point(0, 0)
                end: Qt.point(element.width, 0)
                gradient: Gradient {
                    GradientStop {
                        id: gradientStop
                        position: 0
                        color: "#ffffff"
                    }
    
                    GradientStop {
                        id: gradientStop2
                        position: 0.914
                        color: "#ffffff"
                    }
    
                    GradientStop {
                        id: gradientStop1
                        position: 1
                        color: "#000000"
                    }
                }
            }
            OpacityMask {
                anchors.fill: element
                source: element
                maskSource: mask
            }
    

    The error I get is on LinearGradient, and Qt Design Studio tells me: "Component with path ...../LinearGradient.qml can not be created".





  • Hi @Garu94 , yes you can definitely add Gradient to the texts

    Here is a sample code:-

     Text {
             id: dummyText
          
             text: "Gradient Text"
             font.pointSize: 40
             anchors.centerIn: parent
             visible: false
         }
     
         LinearGradient  {
             anchors.fill: dummyText
             source: dummyText
             gradient: Gradient {
                 GradientStop { position: 0; color: "green" }
                 GradientStop { position: 0.4; color: "yellow" }
                 GradientStop { position: 0.6; color: "orange" }
                 GradientStop { position: 1; color: "cyan" }
             }
         }
    

    Sample Output:-

    388275ea-a84f-4b21-83f1-b0820f186fa8-image.png



  • Hi @Shrinidhi-Upadhyaya,
    Thank you for answering me. This is the whole code of my .qml, buy I still get the same error/warning over the LinearGradient voice in the navigator: "Component with path ...../LinearGradient.qml can not be created".

    import QtQuick 2.12
    import TestQTstudio 1.0
    import QtGraphicalEffects 1.12
    
    Rectangle {
        width: Constants.width
        height: Constants.height
    
        color: Constants.backgroundColor
    
        Text {
            id: dummyText
            text: "Dio Porco"
            font.pixelSize: 40
            anchors.centerIn: parent
            visible: false
        }
        LinearGradient {
            anchors.fill: dummyText
            source: dummyText
            gradient: Gradient {
                GradientStop {
                    position: 0
                    color: "green"
                }
    
                GradientStop {
                    position: 0.914
                    color: "yellow"
                }
    
                GradientStop {
                    position: 1
                    color: "cyan"
                }
            }
        }
    }
    
    


  • Hi @Garu94
    The code looks fine to me, i suspect your Qt Installation is not properly done
    or
    I guess the Component you have added this code as LinearGradient.qml, if so please change the file name to something relevant and use proper path to import the Components to access them in other QML files.

    Can you please show us your code structure and file name.

    All the best.



  • Hi,
    These are the Navigator and project structures:

    Capture1.JPG Capture.JPG


Log in to reply