How do I make a gradient opacity in an image? - qt

Question

How do I make an image fade in qml? How do I achieve this effect? here I attach the image of how I want it to look

Answer 1

A possible solution is to use OpacityMask with a LinearGradient as source
import QtQuick 2.9
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0
Window {
visible: true
width: 600
height: 600
title: qsTr("Hello World")
Image {
id: input
source: "input.jpg"
anchors.fill: parent
OpacityMask {
source: mask
maskSource: input
}
LinearGradient {
id: mask
anchors.fill: parent
gradient: Gradient {
GradientStop { position: 0.2; color: "transparent"}
GradientStop { position: 0.5; color: "white" }
}
}
}
}
Input:
Output:

Answer 2

While the accepted solution achieves the desired effect, it's not actually creating an opacity gradient in the original image (which is what I needed). It's just overlaying the LinearGradient on top of the image; the OpacityMask isn't doing anything and can be removed from that example. The white color at the bottom of the image is from the LinearGradient, not from the background.
Here's an example of how to create an opacity gradient in the original image. Note that the visibility of the "source image" (a Rectangle, in this case) and the LinearGradient are both false.
import QtQuick 2.9
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0
Window {
visible: true
width: 400
height: 400
title: qsTr("Hello World")
// The background, to ensure it's working
Rectangle {
color: "red"
anchors.fill: parent
}
// The "source image"
Rectangle {
id: blueBox
color: "blue"
anchors.fill: parent
opacity: 0.5
visible: false
}
LinearGradient {
id: mask
anchors.fill: blueBox
gradient: Gradient {
GradientStop {
position: 0.2
color: "transparent"
}
GradientStop {
position: 0.5
color: "white"
}
}
visible: false
}
OpacityMask {
anchors.fill: parent
source: blueBox
maskSource: mask
}
}

Answer 3

With few lines code:
LinearGradient {
source: Image { source: 'qrc:/Login Images/ir.svg' }
anchors.fill: parent
start: Qt.point(0, 0)
end: Qt.point(0, 300)
gradient: Gradient {
GradientStop { position: 0.0; color: "white" }
GradientStop { position: 1.0; color: "teal" }
}
}