Finalize m3 shadow & elevation

quickshell/Modules/ControlCenter/ControlCenterPopout.qml

@@ -12,7 +12,7 @@ DankPopout {
     id: root
 
     layerNamespace: "dms:control-center"
-    fullHeightSurface: true
+    fullHeightSurface: false
 
     property string expandedSection: ""
     property var triggerScreen: null

quickshell/Modules/DankBar/BarCanvas.qml

@@ -1,5 +1,4 @@
 import QtQuick
-import QtQuick.Effects
 import QtQuick.Shapes
 import qs.Common
 import qs.Services
@@ -105,7 +104,6 @@ Item {
 
     // Resolved values — per-bar override wins if set, otherwise use global M3 elevation
     readonly property real shadowBlurPx: hasPerBarOverride ? overrideBlurPx : (elevLevel.blurPx ?? 8)
-    readonly property real shadowBlur: Math.max(0, Math.min(1, shadowBlurPx / Theme.elevationBlurMax))
     readonly property color shadowColor: hasPerBarOverride ? Theme.withAlpha(overrideBaseColor, overrideOpacity) : Theme.elevationShadowColor(elevLevel)
     readonly property real shadowOffsetMagnitude: hasPerBarOverride ? (overrideBlurPx * 0.5) : Theme.elevationOffsetMagnitude(elevLevel, 4, effectiveShadowDirection)
     readonly property real shadowOffsetX: Theme.elevationOffsetXFor(hasPerBarOverride ? null : elevLevel, effectiveShadowDirection, shadowOffsetMagnitude)
@@ -153,43 +151,28 @@ Item {
         }
     }
 
-    Loader {
-        id: shadowLoader
-        anchors.fill: parent
-        active: root.shadowEnabled && mainPathCorrectShape && (Theme.elevationEnabled || root.hasPerBarOverride)
-        asynchronous: false
-        sourceComponent: Item {
-            anchors.fill: parent
+    ElevationShadow {
+        id: barShadow
+        visible: root.shadowEnabled && root.width > 0 && root.height > 0
 
-            layer.enabled: true
-            layer.smooth: true
-            layer.samples: barWindow._dpr > 1.5 ? 4 : 2
-            layer.textureSize: Qt.size(Math.round(width * barWindow._dpr), Math.round(height * barWindow._dpr))
-            layer.effect: MultiEffect {
-                shadowEnabled: true
-                shadowBlur: root.shadowBlur
-                blurMax: Theme.elevationBlurMax
-                shadowColor: root.shadowColor
-                shadowVerticalOffset: root.shadowOffsetY
-                shadowHorizontalOffset: root.shadowOffsetX
-                autoPaddingEnabled: true
-            }
+        // Size to the bar's rectangular body, excluding gothic wing extensions
+        x: root.isRight ? root.wing : 0
+        y: root.isBottom ? root.wing : 0
+        width: axis.isVertical ? (parent.width - root.wing) : parent.width
+        height: axis.isVertical ? parent.height : (parent.height - root.wing)
 
-            Shape {
-                anchors.fill: parent
-                preferredRendererType: Shape.CurveRenderer
+        shadowEnabled: root.shadowEnabled
+        level: root.hasPerBarOverride ? null : root.elevLevel
+        direction: root.effectiveShadowDirection
+        fallbackOffset: 4
+        targetRadius: root.rt
+        targetColor: barWindow._bgColor
 
-                ShapePath {
-                    fillColor: barWindow._bgColor
-                    strokeColor: "transparent"
-                    strokeWidth: 0
-
-                    PathSvg {
-                        path: root.mainPath
-                    }
-                }
-            }
-        }
+        shadowBlurPx: root.shadowBlurPx
+        shadowOffsetX: root.shadowOffsetX
+        shadowOffsetY: root.shadowOffsetY
+        shadowColor: root.shadowColor
+        blurMax: Theme.elevationBlurMax
     }
 
     Loader {

quickshell/Modules/DankBar/DankBarWindow.qml

@@ -140,6 +140,20 @@ PanelWindow {
     }
     readonly property real _dpr: CompositorService.getScreenScale(barWindow.screen)
 
+    // Shadow buffer: extra window space for shadow to render beyond bar bounds
+    readonly property bool _shadowActive: (Theme.elevationEnabled && (typeof SettingsData !== "undefined" ? (SettingsData.barElevationEnabled ?? true) : false)) || (barConfig?.shadowIntensity ?? 0) > 0
+    readonly property real _shadowBuffer: {
+        if (!_shadowActive)
+            return 0;
+        const hasOverride = (barConfig?.shadowIntensity ?? 0) > 0;
+        if (hasOverride) {
+            const blur = (barConfig.shadowIntensity ?? 0) * 0.2;
+            const offset = blur * 0.5;
+            return Theme.snap(Math.max(16, blur + offset + 8), _dpr);
+        }
+        return Theme.snap(Theme.elevationRenderPadding(Theme.elevationLevel2, "top", 4, 8, 16), _dpr);
+    }
+
     property string screenName: modelData.name
 
     property bool hasMaximizedToplevel: false
@@ -354,8 +368,8 @@ PanelWindow {
     }
 
     screen: modelData
-    implicitHeight: !isVertical ? Theme.px(effectiveBarThickness + effectiveSpacing + ((barConfig?.gothCornersEnabled ?? false) && !hasMaximizedToplevel ? _wingR : 0), _dpr) : 0
-    implicitWidth: isVertical ? Theme.px(effectiveBarThickness + effectiveSpacing + ((barConfig?.gothCornersEnabled ?? false) && !hasMaximizedToplevel ? _wingR : 0), _dpr) : 0
+    implicitHeight: !isVertical ? Theme.px(effectiveBarThickness + effectiveSpacing + ((barConfig?.gothCornersEnabled ?? false) && !hasMaximizedToplevel ? _wingR : 0), _dpr) + _shadowBuffer : 0
+    implicitWidth: isVertical ? Theme.px(effectiveBarThickness + effectiveSpacing + ((barConfig?.gothCornersEnabled ?? false) && !hasMaximizedToplevel ? _wingR : 0), _dpr) + _shadowBuffer : 0
     color: "transparent"
 
     property var nativeInhibitor: null

quickshell/Modules/DankBar/Widgets/SystemTrayBar.qml

@@ -964,39 +964,26 @@ BasePill {
                 }
             }
 
-            Item {
+            ElevationShadow {
                 id: bgShadowLayer
                 anchors.fill: parent
-                layer.enabled: Theme.elevationEnabled
+                level: menuContainer.elev
+                fallbackOffset: 4
+                shadowBlurPx: menuContainer.shadowBlurPx
+                shadowSpreadPx: menuContainer.shadowSpreadPx
+                shadowColor: {
+                    const baseColor = Theme.isLightMode ? Qt.rgba(0, 0, 0, 1) : Theme.surfaceContainerHighest;
+                    return Theme.withAlpha(baseColor, menuContainer.effectiveShadowAlpha);
+                }
+                targetColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+                targetRadius: Theme.cornerRadius
+                sourceRect.antialiasing: true
+                sourceRect.smooth: true
+                shadowEnabled: Theme.elevationEnabled
                 layer.smooth: true
                 layer.textureSize: Qt.size(Math.round(width * overflowMenu.dpr * 2), Math.round(height * overflowMenu.dpr * 2))
                 layer.textureMirroring: ShaderEffectSource.MirrorVertically
                 layer.samples: 4
-
-                readonly property int blurMax: 64
-
-                layer.effect: MultiEffect {
-                    autoPaddingEnabled: true
-                    shadowEnabled: true
-                    blurEnabled: false
-                    maskEnabled: false
-                    shadowBlur: Math.max(0, Math.min(1, menuContainer.shadowBlurPx / bgShadowLayer.blurMax))
-                    shadowScale: 1 + (2 * menuContainer.shadowSpreadPx) / Math.max(1, Math.min(bgShadowLayer.width, bgShadowLayer.height))
-                    shadowHorizontalOffset: Theme.elevationOffsetX(menuContainer.elev)
-                    shadowVerticalOffset: Theme.elevationOffsetY(menuContainer.elev, 4)
-                    shadowColor: {
-                        const baseColor = Theme.isLightMode ? Qt.rgba(0, 0, 0, 1) : Theme.surfaceContainerHighest;
-                        return Theme.withAlpha(baseColor, menuContainer.effectiveShadowAlpha);
-                    }
-                }
-
-                Rectangle {
-                    anchors.fill: parent
-                    color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
-                    radius: Theme.cornerRadius
-                    antialiasing: true
-                    smooth: true
-                }
             }
 
             Grid {
@@ -1439,37 +1426,24 @@ BasePill {
                         }
                     }
 
-                    Item {
+                    ElevationShadow {
                         id: menuBgShadowLayer
                         anchors.fill: parent
-                        layer.enabled: Theme.elevationEnabled
+                        level: menuContainer.elev
+                        fallbackOffset: 4
+                        shadowBlurPx: menuContainer.shadowBlurPx
+                        shadowSpreadPx: menuContainer.shadowSpreadPx
+                        shadowColor: {
+                            const baseColor = Theme.isLightMode ? Qt.rgba(0, 0, 0, 1) : Theme.surfaceContainerHighest;
+                            return Theme.withAlpha(baseColor, menuContainer.effectiveShadowAlpha);
+                        }
+                        targetColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+                        targetRadius: Theme.cornerRadius
+                        sourceRect.antialiasing: true
+                        shadowEnabled: Theme.elevationEnabled
                         layer.smooth: true
                         layer.textureSize: Qt.size(Math.round(width * menuWindow.dpr), Math.round(height * menuWindow.dpr))
                         layer.textureMirroring: ShaderEffectSource.MirrorVertically
-
-                        readonly property int blurMax: 64
-
-                        layer.effect: MultiEffect {
-                            autoPaddingEnabled: true
-                            shadowEnabled: true
-                            blurEnabled: false
-                            maskEnabled: false
-                            shadowBlur: Math.max(0, Math.min(1, menuContainer.shadowBlurPx / menuBgShadowLayer.blurMax))
-                            shadowScale: 1 + (2 * menuContainer.shadowSpreadPx) / Math.max(1, Math.min(menuBgShadowLayer.width, menuBgShadowLayer.height))
-                            shadowHorizontalOffset: Theme.elevationOffsetX(menuContainer.elev)
-                            shadowVerticalOffset: Theme.elevationOffsetY(menuContainer.elev, 4)
-                            shadowColor: {
-                                const baseColor = Theme.isLightMode ? Qt.rgba(0, 0, 0, 1) : Theme.surfaceContainerHighest;
-                                return Theme.withAlpha(baseColor, menuContainer.effectiveShadowAlpha);
-                            }
-                        }
-
-                        Rectangle {
-                            anchors.fill: parent
-                            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
-                            radius: Theme.cornerRadius
-                            antialiasing: true
-                        }
                     }
 
                     QsMenuAnchor {

quickshell/Modules/DankDash/MediaDropdownOverlay.qml

@@ -89,30 +89,18 @@ Item {
             }
         }
 
-        Item {
+        ElevationShadow {
             id: volumeShadowLayer
             anchors.fill: parent
             z: -1
-
-            layer.enabled: Theme.elevationEnabled
-            layer.effect: MultiEffect {
-                autoPaddingEnabled: true
-                shadowEnabled: Theme.elevationEnabled
-                shadowHorizontalOffset: Theme.elevationOffsetX(Theme.elevationLevel2)
-                shadowVerticalOffset: Theme.elevationOffsetY(Theme.elevationLevel2, 4)
-                shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
-                blurMax: Theme.elevationBlurMax
-                shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
-                shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
-            }
-
-            Rectangle {
-                anchors.fill: parent
-                radius: volumePanel.radius
-                color: volumePanel.color
-                border.color: volumePanel.border.color
-                border.width: volumePanel.border.width
-            }
+            level: Theme.elevationLevel2
+            fallbackOffset: 4
+            targetRadius: volumePanel.radius
+            targetColor: volumePanel.color
+            borderColor: volumePanel.border.color
+            borderWidth: volumePanel.border.width
+            shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
+            shadowEnabled: Theme.elevationEnabled
         }
 
         MouseArea {
@@ -239,30 +227,18 @@ Item {
             }
         }
 
-        Item {
+        ElevationShadow {
             id: audioDevicesShadowLayer
             anchors.fill: parent
             z: -1
-
-            layer.enabled: Theme.elevationEnabled
-            layer.effect: MultiEffect {
-                autoPaddingEnabled: true
-                shadowEnabled: Theme.elevationEnabled
-                shadowHorizontalOffset: Theme.elevationOffsetX(Theme.elevationLevel2)
-                shadowVerticalOffset: Theme.elevationOffsetY(Theme.elevationLevel2, 4)
-                shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
-                blurMax: Theme.elevationBlurMax
-                shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
-                shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
-            }
-
-            Rectangle {
-                anchors.fill: parent
-                radius: audioDevicesPanel.radius
-                color: audioDevicesPanel.color
-                border.color: audioDevicesPanel.border.color
-                border.width: audioDevicesPanel.border.width
-            }
+            level: Theme.elevationLevel2
+            fallbackOffset: 4
+            targetRadius: audioDevicesPanel.radius
+            targetColor: audioDevicesPanel.color
+            borderColor: audioDevicesPanel.border.color
+            borderWidth: audioDevicesPanel.border.width
+            shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
+            shadowEnabled: Theme.elevationEnabled
         }
 
         Column {
@@ -405,30 +381,18 @@ Item {
             }
         }
 
-        Item {
+        ElevationShadow {
             id: playersShadowLayer
             anchors.fill: parent
             z: -1
-
-            layer.enabled: Theme.elevationEnabled
-            layer.effect: MultiEffect {
-                autoPaddingEnabled: true
-                shadowEnabled: Theme.elevationEnabled
-                shadowHorizontalOffset: Theme.elevationOffsetX(Theme.elevationLevel2)
-                shadowVerticalOffset: Theme.elevationOffsetY(Theme.elevationLevel2, 4)
-                shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
-                blurMax: Theme.elevationBlurMax
-                shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
-                shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
-            }
-
-            Rectangle {
-                anchors.fill: parent
-                radius: playersPanel.radius
-                color: playersPanel.color
-                border.color: playersPanel.border.color
-                border.width: playersPanel.border.width
-            }
+            level: Theme.elevationLevel2
+            fallbackOffset: 4
+            targetRadius: playersPanel.radius
+            targetColor: playersPanel.color
+            borderColor: playersPanel.border.color
+            borderWidth: playersPanel.border.width
+            shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
+            shadowEnabled: Theme.elevationEnabled
         }
 
         Column {

quickshell/Modules/DankDash/MediaPlayerTab.qml

@@ -529,15 +529,15 @@ Item {
                                     onClicked: activePlayer && activePlayer.togglePlaying()
                                 }
 
-                                layer.enabled: Theme.elevationEnabled
-                                layer.effect: MultiEffect {
-                                    shadowEnabled: Theme.elevationEnabled
-                                    shadowHorizontalOffset: Theme.elevationOffsetX(Theme.elevationLevel1)
-                                    shadowVerticalOffset: Theme.elevationOffsetY(Theme.elevationLevel1, 1)
-                                    shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel1 && Theme.elevationLevel1.blurPx !== undefined ? Theme.elevationLevel1.blurPx : 4) / Theme.elevationBlurMax)) : 0
-                                    blurMax: Theme.elevationBlurMax
-                                    shadowColor: Theme.elevationShadowColor(Theme.elevationLevel1)
+                                ElevationShadow {
+                                    anchors.fill: parent
+                                    z: -1
+                                    level: Theme.elevationLevel1
+                                    fallbackOffset: 1
+                                    targetRadius: parent.radius
+                                    targetColor: parent.color
                                     shadowOpacity: Theme.elevationLevel1 && Theme.elevationLevel1.alpha !== undefined ? Theme.elevationLevel1.alpha : 0.2
+                                    shadowEnabled: Theme.elevationEnabled
                                 }
                             }
                         }

quickshell/Modules/Notifications/Center/HistoryNotificationCard.qml

@@ -34,32 +34,17 @@ Rectangle {
     clip: false
     readonly property bool shadowsAllowed: Theme.elevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
 
-    Item {
+    ElevationShadow {
         id: shadowLayer
         anchors.fill: parent
         z: -1
-
-        layer.enabled: root.shadowsAllowed
-        layer.effect: MultiEffect {
-            autoPaddingEnabled: true
-            shadowEnabled: root.shadowsAllowed
-            blurEnabled: false
-            maskEnabled: false
-            shadowBlur: Math.max(0, Math.min(1, ((Theme.elevationLevel1 && Theme.elevationLevel1.blurPx !== undefined) ? Theme.elevationLevel1.blurPx : 4) / Theme.elevationBlurMax))
-            shadowScale: 1
-            shadowVerticalOffset: Theme.elevationOffsetY(Theme.elevationLevel1, 1)
-            shadowHorizontalOffset: Theme.elevationOffsetX(Theme.elevationLevel1)
-            blurMax: Theme.elevationBlurMax
-            shadowColor: Theme.elevationShadowColor(Theme.elevationLevel1)
-        }
-
-        Rectangle {
-            anchors.fill: parent
-            radius: root.radius
-            color: root.color
-            border.color: root.border.color
-            border.width: root.border.width
-        }
+        level: Theme.elevationLevel1
+        fallbackOffset: 1
+        targetRadius: root.radius
+        targetColor: root.color
+        borderColor: root.border.color
+        borderWidth: root.border.width
+        shadowEnabled: root.shadowsAllowed
     }
 
     color: {

quickshell/Modules/Notifications/Center/NotificationCard.qml

@@ -132,32 +132,21 @@ Rectangle {
         id: cardHoverHandler
     }
 
-    Item {
+    ElevationShadow {
         id: shadowLayer
         anchors.fill: parent
         z: -1
-
-        layer.enabled: root.shadowsAllowed
-        layer.effect: MultiEffect {
-            autoPaddingEnabled: true
-            shadowEnabled: root.shadowsAllowed
-            blurEnabled: false
-            maskEnabled: false
-            shadowBlur: Math.max(0, Math.min(1, root.shadowBlurPx / Theme.elevationBlurMax))
-            shadowScale: 1
-            shadowVerticalOffset: root.shadowOffsetYPx
-            shadowHorizontalOffset: root.shadowOffsetXPx
-            blurMax: Theme.elevationBlurMax
-            shadowColor: root.shadowElevation ? Theme.elevationShadowColor(root.shadowElevation) : "transparent"
-        }
-
-        Rectangle {
-            anchors.fill: parent
-            radius: root.radius
-            color: root.color
-            border.color: root.border.color
-            border.width: root.border.width
-        }
+        level: root.shadowElevation
+        targetRadius: root.radius
+        targetColor: root.color
+        borderColor: root.border.color
+        borderWidth: root.border.width
+        shadowBlurPx: root.shadowBlurPx
+        shadowSpreadPx: 0
+        shadowOffsetX: root.shadowOffsetXPx
+        shadowOffsetY: root.shadowOffsetYPx
+        shadowColor: root.shadowElevation ? Theme.elevationShadowColor(root.shadowElevation) : "transparent"
+        shadowEnabled: root.shadowsAllowed
     }
 
     Rectangle {

quickshell/Modules/Notifications/Center/NotificationCenterPopout.qml

@@ -7,7 +7,7 @@ DankPopout {
     id: root
 
     layerNamespace: "dms:notification-center-popout"
-    fullHeightSurface: true
+    fullHeightSurface: false
 
     property bool notificationHistoryVisible: false
     property var triggerScreen: null

quickshell/Modules/Notifications/Popup/NotificationPopup.qml

@@ -381,48 +381,36 @@ PanelWindow {
             }
         }
 
-        Item {
+        ElevationShadow {
             id: bgShadowLayer
             anchors.fill: parent
             anchors.margins: -content.shadowRenderPadding
-            layer.enabled: !win._isDestroying && win.screenValid && content.shadowsAllowed
+            level: content.elevLevel
+            fallbackOffset: 6
+            shadowBlurPx: content.shadowBlurPx
+            shadowOffsetX: content.shadowOffsetX
+            shadowOffsetY: content.shadowOffsetY
+            shadowColor: content.shadowsAllowed && content.elevLevel ? Theme.elevationShadowColor(content.elevLevel) : "transparent"
+            shadowEnabled: !win._isDestroying && win.screenValid && content.shadowsAllowed
             layer.textureSize: Qt.size(Math.round(width * win.dpr), Math.round(height * win.dpr))
             layer.textureMirroring: ShaderEffectSource.MirrorVertically
 
-            readonly property int blurMax: Theme.elevationBlurMax
-
-            layer.effect: MultiEffect {
-                id: shadowFx
-                autoPaddingEnabled: true
-                shadowEnabled: content.shadowsAllowed
-                blurEnabled: false
-                maskEnabled: false
-                shadowBlur: Math.max(0, Math.min(1, content.shadowBlurPx / bgShadowLayer.blurMax))
-                shadowScale: 1
-                shadowHorizontalOffset: content.shadowOffsetX
-                shadowVerticalOffset: content.shadowOffsetY
-                blurMax: Theme.elevationBlurMax
-                shadowColor: content.shadowsAllowed && content.elevLevel ? Theme.elevationShadowColor(content.elevLevel) : "transparent"
-            }
+            sourceRect.anchors.fill: undefined
+            sourceRect.x: content.shadowRenderPadding + content.cardInset
+            sourceRect.y: content.shadowRenderPadding + content.cardInset
+            sourceRect.width: Math.max(0, content.width - (content.cardInset * 2))
+            sourceRect.height: Math.max(0, content.height - (content.cardInset * 2))
+            sourceRect.radius: Theme.cornerRadius
+            sourceRect.color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+            sourceRect.border.color: notificationData && notificationData.urgency === NotificationUrgency.Critical ? Theme.withAlpha(Theme.primary, 0.3) : Theme.withAlpha(Theme.outline, 0.08)
+            sourceRect.border.width: notificationData && notificationData.urgency === NotificationUrgency.Critical ? 2 : 0
 
             Rectangle {
-                id: shadowShapeSource
-                x: content.shadowRenderPadding + content.cardInset
-                y: content.shadowRenderPadding + content.cardInset
-                width: Math.max(0, content.width - (content.cardInset * 2))
-                height: Math.max(0, content.height - (content.cardInset * 2))
-                radius: Theme.cornerRadius
-                color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
-                border.color: notificationData && notificationData.urgency === NotificationUrgency.Critical ? Theme.withAlpha(Theme.primary, 0.3) : Theme.withAlpha(Theme.outline, 0.08)
-                border.width: notificationData && notificationData.urgency === NotificationUrgency.Critical ? 2 : 0
-            }
-
-            Rectangle {
-                x: shadowShapeSource.x
-                y: shadowShapeSource.y
-                width: shadowShapeSource.width
-                height: shadowShapeSource.height
-                radius: shadowShapeSource.radius
+                x: bgShadowLayer.sourceRect.x
+                y: bgShadowLayer.sourceRect.y
+                width: bgShadowLayer.sourceRect.width
+                height: bgShadowLayer.sourceRect.height
+                radius: bgShadowLayer.sourceRect.radius
                 visible: notificationData && notificationData.urgency === NotificationUrgency.Critical
                 opacity: 1
                 clip: true

quickshell/Modules/Settings/AboutTab.qml

@@ -878,15 +878,17 @@ Item {
         x: hoveredButton ? hoveredButton.mapToItem(aboutTab, hoveredButton.width / 2, 0).x - width / 2 : 0
         y: hoveredButton ? communityIcons.mapToItem(aboutTab, 0, 0).y - height - 8 : 0
 
-        layer.enabled: Theme.elevationEnabled
-        layer.effect: MultiEffect {
-            shadowEnabled: Theme.elevationEnabled
+        ElevationShadow {
+            anchors.fill: parent
+            z: -1
+            level: Theme.elevationLevel1
+            fallbackOffset: 1
+            targetRadius: communityTooltip.radius
+            targetColor: communityTooltip.color
+            borderColor: communityTooltip.border.color
+            borderWidth: communityTooltip.border.width
             shadowOpacity: Theme.elevationLevel1 && Theme.elevationLevel1.alpha !== undefined ? Theme.elevationLevel1.alpha : 0.2
-            shadowHorizontalOffset: Theme.elevationOffsetX(Theme.elevationLevel1)
-            shadowVerticalOffset: Theme.elevationOffsetY(Theme.elevationLevel1, 1)
-            shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel1 && Theme.elevationLevel1.blurPx !== undefined ? Theme.elevationLevel1.blurPx : 4) / Theme.elevationBlurMax)) : 0
-            blurMax: Theme.elevationBlurMax
-            shadowColor: Theme.elevationShadowColor(Theme.elevationLevel1)
+            shadowEnabled: Theme.elevationEnabled
         }
 
         StyledText {

quickshell/Modules/Toast.qml

@@ -1,5 +1,4 @@
 import QtQuick
-import QtQuick.Effects
 import Quickshell
 import Quickshell.Wayland
 import qs.Common
@@ -96,7 +95,6 @@ PanelWindow {
             }
         }
         radius: Theme.cornerRadius
-        layer.enabled: Theme.elevationEnabled
         opacity: shouldBeVisible ? 1 : 0
 
         Column {
@@ -406,15 +404,15 @@ PanelWindow {
             onClicked: ToastService.hideToast()
         }
 
-        layer.effect: MultiEffect {
-            autoPaddingEnabled: true
-            shadowEnabled: Theme.elevationEnabled
-            shadowHorizontalOffset: Theme.elevationOffsetX(Theme.elevationLevel3)
-            shadowVerticalOffset: Theme.elevationOffsetY(Theme.elevationLevel3, 6)
-            shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel3 && Theme.elevationLevel3.blurPx !== undefined ? Theme.elevationLevel3.blurPx : 12) / Theme.elevationBlurMax)) : 0
-            blurMax: Theme.elevationBlurMax
-            shadowColor: Theme.elevationShadowColor(Theme.elevationLevel3)
+        ElevationShadow {
+            anchors.fill: parent
+            z: -1
+            level: Theme.elevationLevel3
+            fallbackOffset: 6
+            targetRadius: toast.radius
+            targetColor: toast.color
             shadowOpacity: Theme.elevationLevel3 && Theme.elevationLevel3.alpha !== undefined ? Theme.elevationLevel3.alpha : 0.3
+            shadowEnabled: Theme.elevationEnabled
         }
 
         Behavior on opacity {

quickshell/Modules/WorkspaceOverlays/OverviewWidget.qml

@@ -1,5 +1,4 @@
 import QtQuick
-import QtQuick.Effects
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Hyprland
@@ -153,15 +152,15 @@ Item {
         radius: Theme.cornerRadius
         color: Theme.surfaceContainer
 
-        layer.enabled: Theme.elevationEnabled
-        layer.effect: MultiEffect {
-            shadowEnabled: Theme.elevationEnabled
-            shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
-            shadowHorizontalOffset: Theme.elevationOffsetX(Theme.elevationLevel2)
-            shadowVerticalOffset: Theme.elevationOffsetY(Theme.elevationLevel2, 4)
-            blurMax: Theme.elevationBlurMax
-            shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
+        ElevationShadow {
+            anchors.fill: parent
+            z: -1
+            level: Theme.elevationLevel2
+            fallbackOffset: 4
+            targetRadius: Theme.cornerRadius
+            targetColor: Theme.surfaceContainer
             shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
+            shadowEnabled: Theme.elevationEnabled
         }
 
         ColumnLayout {