LinearGradient inside Rectangle is displaying blurred white borders-CodePudding

I am using LinearGradient as background for rectangle, but the left and right borders of the rectangle are a little bit white and blurred. How can I avoid this situation?

I have tried to set below properties on the Rectangle but it didn't work.

clip: true
smooth: true
antialiasing: true

Here is my code:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtGraphicalEffects 1.15

Window {
    width: 640
    height: 480
    visible: true

Rectangle {
    anchors.fill: parent
    color: "#4f4444"
}

Rectangle {
    id: root
    anchors.centerIn: parent
    width: 355
    height: 90
    radius: 50

    LinearGradient {
        anchors.fill: parent
        source: ShaderEffectSource {
            sourceItem: root
            recursive: true
        }
        start: Qt.point(0, 0)
        end: Qt.point(parent.width, 0)
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#2a3254" }
            GradientStop { position: 1.0; color: "#0e1c57" }
        }
    }

    Text {
        anchors.centerIn: parent
        text: "Click me!"
        color: "white"
    }
}
}

CodePudding user response：

The problem is that it is smoothing the edges of the shape to blend with the Rectangle that contains the gradient (root). If you change that Rectangle's color to match what is drawn behind it, you won't see those edges anymore.

Rectangle {
    id: bground
    anchors.fill: parent
    color: "#4f4444"
}

Rectangle {
    id: root
    color: bground.color  // Match the background's color

    LinearGradient { ... }
}