How to draw a line with faded ends?

Question

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

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.

Answer 1

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" }
            }
        }
    }

Answer 2

You can also use RadialGradient:

    RadialGradient {
        anchors.centerIn: parent
        width: 400
        height: 5
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" }
            GradientStop { position: 0.5; color: "black" }
        }
    }

You can Try it Online!