Is it possible to apply gradient on texts?

Garu94

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".

6thC

https://doc.qt.io/qt-5/qml-qtquick-shadereffect.html#shadereffect-and-item-layers has an example that might help.

Shrinidhi Upadhyaya

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:-

Garu94

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"
            }
        }
    }
}

Pradeep P N

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.

Garu94

Hi,
These are the Navigator and project structures: