QML - DropShadow blurring text & img - qt

Question

I'm trying to apply a DropShadow effect into my Rectangle. After I did it, text and icon inside are getting blurred. Any idea how to fix it?
import VPlayApps 1.0
import QtQuick 2.9
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.2
App {
Rectangle {
id: buttonOverview
width: app.width * 0.12
height: buttonQuit.width
color: "#439fd0"
radius: 3
anchors.left: parent.left
anchors.leftMargin: app.width * 0.034
gradient: Gradient {
GradientStop {
position: 0
color: "#48a4d5"
}
GradientStop {
position: 1
color: "#01618c"
}
}
AppImage {
id: appImage
width: 44
height: 43
anchors.bottom: spacerProjectOverview.top
anchors.horizontalCenter: parent.horizontalCenter
source: "../../../WinCan/Icons/projectOverview.png"
fillMode: Image.PreserveAspectFit
}
Text {
id: textOverview
color: "#ffffff"
text: qsTr("Project\nOverview")
anchors.topMargin: 5
anchors.top: spacerProjectOverview.bottom
anchors.bottomMargin: parent.height * 0.18
anchors.bottom: parent.bottom
font.bold: true
horizontalAlignment: Text.AlignHCenter
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 14
}
MouseArea {
anchors.fill: parent
onClicked: {
buttonQuit.opacity = 0
}
}
Rectangle {
id: spacerProjectOverview
width: parent.width
height: parent.height * 0.05
color: "transparent"
anchors.verticalCenter: parent.verticalCenter
}
anchors.verticalCenter: parent.verticalCenter
}
DropShadow {
anchors.fill: buttonOverview
horizontalOffset: 1
verticalOffset: 6
radius: 5
samples: 5
source: buttonOverview
color: "black"
}
}
Expected : Getting shadow and nice looking text and icons
Actual : Getting shadow but text and icons are blurry

Answer 1

Your DropShadow is being applied to buttonOverview components area and as it is defined below the buttonOverview it will be positioned on top of it. If i am understanding your requirements you should move the DropShadow above the buttonOverview Rectangle component.