Shadow around an Item

[Aleksey Asensus]

Trying to implement shadow with MultiEffect like this:

    MultiEffect {
        anchors.fill: item
        source: item
        shadowEnabled: true
        shadowColor: "#9B9B9B"
        shadowBlur: 1.0
        shadowHorizontalOffset: 8
        shadowVerticalOffset: 8
    }

and it drops shadow from bottom and right side of the item and have the same radius as background Rectangle in the item. But what if I want to show it around the item? How to change MultiEffect?

[Aleksey Asensus]

Solved via RectangularGlow from Qt5Compat.GraphicalEffects for now as MultiEffect is buggy and unusable now:

RectangularGlow {
    anchors.fill: item
    glowRadius: 15
    spread: 0.4
    color: "#9B9B9B"
    cornerRadius: 12 /* item radius */ + glowRadius
}

[GrecKo]

If you are using Qt 6.9 you can use RectangularShadow

[Aleksey_K]

@GrecKo said in Shadow around an Item:

If you are using Qt 6.9 you can use RectangularShadow

6.8.2 unfortunately and can't upgrade.

[mzimmers]

There isn't a really straightforward way to do this. I created a ShadowBackground.qml component:

// ShadowBackground.qml
import QtQuick
import QtQuick.Effects

Item {
    id: root

    // ─── Public API ────────────────────────────────────────
    property color   color:         "#ffffff"
    property real    radius:        16
    property color   shadowColor:   "#000000"
    property var     shadowPasses: [
        { blur: 0.03, offsetY: 0, opacity: 0.04 },
        { blur: 0.09, offsetY: 3, opacity: 0.04 },
        { blur: 0.40, offsetY: 5, opacity: 0.07 }
    ]

    // ─── Shadows ───────────────────────────────────────────
    Repeater {
        model: root.shadowPasses
        delegate: MultiEffect {
            anchors.fill: parent
            source: rect
            autoPaddingEnabled: true
            shadowEnabled:         true
            shadowColor:           root.shadowColor
            shadowBlur:            modelData.blur
            shadowVerticalOffset:  modelData.offsetY
            shadowHorizontalOffset: 0
            shadowOpacity:         modelData.opacity
        }
    }

    Rectangle {
        id: rect
        anchors.fill: parent
        radius:       root.radius
        color:        root.color
    }
}

(this one does 3 shadows to achieve the desired effect)

And I use it like this:

<whatever you want to shadow; I use a Pane>
    background: Item {
        anchors.fill: parent
        ShadowBackground {
            anchors.fill: parent
        }
        Rectangle {
            anchors.fill: parent
        }
    }

[Aleksey_K]

@mzimmers too weird, also such approach does not work well for a rounded Rectangle.

[mzimmers]

if you're applying it to a Rectangle with a radius, put the radius in the ShadowBackground. It works; all my rectangles are radiused.

[Aleksey Asensus]

Solved via RectangularGlow from Qt5Compat.GraphicalEffects for now as MultiEffect is buggy and unusable now:

RectangularGlow {
    anchors.fill: item
    glowRadius: 15
    spread: 0.4
    color: "#9B9B9B"
    cornerRadius: 12 /* item radius */ + glowRadius
}

[Aleksey Asensus]

What I see with MultiEffect: