Linear Gradient on Alpha (Not Color)

  • QML includes a LinearGradient method that blends two colors. Is there any QML method that allows a linear gradient to be applied to an image's alpha?

    I am trying to fade an image in via a gradient.


  • Hi! Have a look at Graphical Effects.

  • Weiland,

    Thank you for your response. I have reviewed Graphical Effects. I see the LinearGradient method, which relates to color gradients, but I do not see any method related to programmatically generating a gradient for alpha. I also see the OpacityMask, but do not know of a good way to use that method to programmatically generate a dynamic alpha gradient.


  • Hmm.. I had hoped that Graphical Effects would offer something for you OOTB. If everything else fails you can implement any effect you like using ShaderEffect QML Type. I didn't look it up but I guess that's just how the stuff in Graphical effects is implemented. It has a QML API so that might be handy. If going that road turns out to be too hard you could also craft a solution in C++ that manipulates a QImage, maybe based on QQuickPaintedItem Class. That will probably be suboptimal performance-wise but might be easier and better than nothing. @J.Hilk is the man!

  • Moderators

    @Hoyt hi, just tested it, LineGradient should work with alpha as well:
    take this example:

    import QtQuick 2.8
    import QtQuick.Window 2.2
    import QtGraphicalEffects 1.0
    Window {
        visible: true
        title: qsTr("Hello World")
        width: 300
        height: 300
            color: "red"
        LinearGradient {
            anchors.fill: parent
            start: Qt.point(0, 0)
            end: Qt.point(0, 300)
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#00FFFFFF" }
                GradientStop { position: 1.0; color: "#FFFFFFFF" }

    The Linear Gradient describes an Alpha change from transparent to white on a red background.
    Works fine for me.

  • Truly impressive! Thank you very much.


Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.