Important: Please read the Qt Code of Conduct -

Fading to transparent gradient

  • Hi, I'm trying to create a dynamic item which edges are fading to transparent same like here (linear gradient example) alt text
    I've tried with opacityMask and LinearGradient but in LinearGradient I had to use specific color. At that example 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.