Vertical fade and different color on horizontal

Question

How can we create linear gradient with different colors and fade from top to bottom (vertical fading) with qml or javascript?

Or can with fragment? is there any tutorial!!

In other words, combine two images.

---

UPDATE: I draw this with illustrator and exactly what I want.

Answer 1

Everything you need to solve your issue is already mentioned in my first answer. Please have a read and try to understand the code.

I made another example that does what you want with OpacityMask, if you want to do it with shaders take my example from github to make your shader work and then read about GLSL. There is no tutorial in Qt that teaches you about fragment shaders as it is just using GLSL. The only difficult part with shaders in QML is to make them work, but as said before you can copy my example from github or any other and adapt it.

You should read about OpacityMask and LinearGradient.

If you want to know more about shaders in QML you should read about ShaderTools, ShaderEffect and ShaderEffectSource.

LinearGradient {
    id: mask
    anchors.fill: parent
    start: Qt.point(0, 0)
    end: Qt.point(0, root.height)
    visible: false
    gradient: Gradient {
        GradientStop { position: 0.0; color: "black" }
        GradientStop { position: 1.0; color: "transparent" }
    }
}

LinearGradient {
    id: gradientSource
    anchors.fill: parent
    start: Qt.point(0, 0)
    end: Qt.point(root.width, 0)
    visible: false
    gradient: Gradient {
        GradientStop { position: 0.0; color: "yellow" }
        GradientStop { position: 1.0; color: "red" }
    }
}

Item {
    anchors.fill: parent
/*
    Image { // transparency checkerboard
        anchors.fill: parent
        fillMode: Image.Tile
        source: "qrc:/images/checkers.png"
    }
*/
    OpacityMask {
        anchors.fill: parent
        source: gradientSource
        maskSource: mask
    }
}