Fading to transparent gradient

  • Hi, I'm trying to create a dynamic item which edges are fading to transparent same like here https://www.getpaint.net/doc/latest/GradientTool.html (linear gradient example) alt text
    I've tried with opacityMask and LinearGradient but in LinearGradient I had to use specific color. At that example https://stackoverflow.com/a/48472948 it looks good as background is white, but in my case background doesnt have solid color.
    Do you have any ideas how that can be done?

  • I think you want the result like this:

    import QtQuick 2.9
    import QtQuick.Window 2.3
    import QtGraphicalEffects 1.0
    Window {
        visible: true
        width: 500
        height: 500
        title: qsTr("Hello World")
        Image {
            source: "back.jpg"
        Image {
            id: image
            anchors.centerIn: parent
            source: "image.jpg"
            visible: false
        LinearGradient {
            id: mask
            anchors.fill: image
            start: Qt.point(0, 0)
            end: Qt.point(image.width, 0)
            gradient: Gradient {
                GradientStop { position: 0.2; color: "transparent" }
                GradientStop { position: 0.5; color: "white" }
                GradientStop { position: 0.8; color: "transparent" }
            visible: false
        OpacityMask {
            anchors.fill: image
            source: image
            maskSource: mask

  • @Jacob.zhang That works, so visiblity do the trick. Thanks.