Search code examples
qtqmllinefaderectangles

How to draw a line with faded ends?


I'm trying to draw a line with faded ends in QML, similar to this one:

A faded ends white line on a black background

I tried drawing the line using a rectangle but I don't know how to fade out the ends.

I am using Qt 5.12.


Solution

  • You can use the Rectangle item both with Gradient, for example:

        Rectangle {
            anchors.fill: parent
            color: "black"
    
            Rectangle {
                anchors.centerIn: parent
                width: 400
                height: 5
                border.width: 0
                gradient: Gradient {
                    orientation: Gradient.Horizontal
                    GradientStop { position: 0.0; color: "black" }
                    GradientStop { position: 0.25; color: "white" }
                    GradientStop { position: 0.75; color: "white" }
                    GradientStop { position: 1.0; color: "black" }
                }
            }
        }