Is it possible to apply a color Gradient to Text in QML?

Question

Is it possible to apply a color Gradient to Text in QML? If so, how? If not, what would be an acceptable means to achieve the same effect?

Answer 1

You can use LinearGradient QML Type.

import QtQuick 2.4
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window
{
    visible: true
    height: 500
    width: 500
    Text {
        id: text
        font.pointSize: 55
        anchors.centerIn: parent
        text: "Hello World!"
        visible: false
    }
    LinearGradient  {
        anchors.fill: text
        source: text
        gradient: Gradient {
            GradientStop { position: 0; color: "yellow" }
            GradientStop { position: 1; color: "red" }
        }
    }
}

Answer 2

It is possible using Item layers For example:

import QtQuick 2.3
import QtQuick.Window 2.0
import QtGraphicalEffects 1.0

Window {
    width: 400
    height: 300
    visible: true
    Rectangle {
        id: gradientRect;
        width: 10
        height: 10
        gradient: Gradient {
            GradientStop { position: 0; color: "yellow" }
            GradientStop { position: 1; color: "red" }
        }
        visible: false;
        layer.enabled: true;
        layer.smooth: true
    }

    Text {
        id: txt
        anchors.centerIn: parent
        text: "Hello, world"
        font.pixelSize: 64
        layer.enabled: true
        layer.samplerName: "maskSource"
        layer.effect: ShaderEffect {
            property var colorSource: gradientRect;
            fragmentShader: "
                        uniform lowp sampler2D colorSource;
                        uniform lowp sampler2D maskSource;
                        uniform lowp float qt_Opacity;
                        varying highp vec2 qt_TexCoord0;
                        void main() {
                            gl_FragColor =
                                texture2D(colorSource, qt_TexCoord0)
                                * texture2D(maskSource, qt_TexCoord0).a
                                * qt_Opacity;
                        }
                    "
        }
    }
}

Look up here for more examples.