How to create drop shadow for Rectangle on QtQuick 2.0

Question

How can i draw a drop shadow for a Rectangle visual item on QtQuick 2.0?
I like to draw a drop shadow for my main window (I have a transparent and no-decorated window)

Solution 1

As a workaround for the clipped shadow issue, you can put your Rectangle in an Item, with additionnal margin to take blur radius in account, and apply shadow on that container:

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
    width: 320
    height: 240

    Item {
        id: container
        anchors.centerIn: parent
        width:  rect.width  + (2 * rectShadow.radius)
        height: rect.height + (2 * rectShadow.radius)
        visible: false

        Rectangle {
            id: rect
            width: 100
            height: 50
            color: "orange"
            radius: 7
            antialiasing: true
            border {
                width: 2
                color: "red"
            }
            anchors.centerIn: parent
        }
    }

    DropShadow {
        id: rectShadow
        anchors.fill: source
        cached: true
        horizontalOffset: 3
        verticalOffset: 3
        radius: 8.0
        samples: 16
        color: "#80000000"
        smooth: true
        source: container
    }
}

Solution 2

Just use DropShadow from the QtGraphicalEffects module.

A complete, working example:

import QtQuick 2.0
import QtGraphicalEffects 1.0

Rectangle {
    width: 640
    height: 480
    color: "blue"

    Rectangle {
        id: rect
        anchors.centerIn: parent
        width: 100
        height: 100
        color: "red"
    }

    DropShadow {
        anchors.fill: rect
        cached: true
        horizontalOffset: 3
        verticalOffset: 3
        radius: 8.0
        samples: 16
        color: "#80000000"
        source: rect
    }
}

Note that you will see a number of warnings like this:

file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/DropShadow.qml:391:5: QML SourceProxy: Binding loop detected for property "output" file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:66:5: QML SourceProxy: Binding loop detected for property "output" file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:61:5: QML SourceProxy: Binding loop detected for property "output" file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:66:5: QML SourceProxy: Binding loop detected for property "output" file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:61:5: QML SourceProxy: Binding loop detected for property "output" file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianGlow.qml:53:5: QML SourceProxy: Binding loop detected for property "output"

Those warnings are QTBUG-28521, which has been fixed in Qt 5.0.2 (which at the time of this writing has not yet been released). Fortunately, there's no actual problem, aside from the annoying console output.

Solution 3

Interesting question... I've been searching for a better way to do this. This is my quick and dirty way of accomplishing a drop shadow effect for a QML Rectangle for the time being.

Rectangle{
    width: 500
    height: 500
    color: "dark grey"


    Rectangle {
        id: backgroundRect
        width: 200
        height: 150
        radius: 5
        anchors.centerIn: parent
        color: "red"

        Rectangle {
            id: dropShadowRect
            property real offset: Math.min(parent.width*0.025, parent.height*0.025)
            color: "purple"
            width: parent.width
            height: parent.height
            z: -1
            opacity: 0.75
            radius: backgroundRect.radius + 2
            anchors.left: parent.left
            anchors.leftMargin: -offset
            anchors.top: parent.top
            anchors.topMargin: offset
        }
    }
}

Comments

[S.M.Mousavi]

Nope! result shadow is very solid/flat. I like to have an smooth shadow.

[S.M.Mousavi]

Thank you, but the result shadow is very flat. I like to have an smooth shadow

[cgmb]

I'll bet the reason it doesn't smoothly fade out is because of this problem: stackoverflow.com/q/14576547/331041

[S.M.Mousavi]

I agree... I guess that this is my problem

[stackunderflow]

@S.M.Mousavi yea, I definetly agree. The only way to make it look smoother would be to fool around with gradients... I wish there was a better option.

[S.M.Mousavi]

Thank you @stackunderflow anyway :)

[TheBootroo]

I forgot it, but you should specify visible: false on the Item container, because the DropShadow effect duplicates the source item on its own, so it will avoid strange rendering issues.

[Vega4]

In my case Qt 5.15.2 this caused the internals of container not receive any touch/mouse events on iOS.