[SOLVED] LinearGradient inside Rectangle is displaying blurred white borders

Issue

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

Solution

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 { ... }
}

Answered By – JarMan

Answer Checked By – Cary Denson (BugsFixing Admin)