Finalize m3 shadow & elevation

Implement Auto-Bar location aware shadowing
2026-05-02 10:32:07 -04:00 · 2026-03-01 00:43:46 -05:00 · 2026-02-28 17:54:03 -05:00
29 changed files with 640 additions and 450 deletions
--- a/quickshell/Common/ElevationShadow.qml
+++ b/quickshell/Common/ElevationShadow.qml
@@ -0,0 +1,54 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Effects
+import qs.Common
+
+Item {
+    id: root
+
+    property var level: Theme.elevationLevel2
+    property string direction: Theme.elevationLightDirection
+    property real fallbackOffset: 4
+
+    property color targetColor: "white"
+    property real targetRadius: Theme.cornerRadius
+    property color borderColor: "transparent"
+    property real borderWidth: 0
+
+    property bool shadowEnabled: Theme.elevationEnabled
+    property real shadowBlurPx: level && level.blurPx !== undefined ? level.blurPx : 0
+    property real shadowSpreadPx: level && level.spreadPx !== undefined ? level.spreadPx : 0
+    property real shadowOffsetX: Theme.elevationOffsetXFor(level, direction, fallbackOffset)
+    property real shadowOffsetY: Theme.elevationOffsetYFor(level, direction, fallbackOffset)
+    property color shadowColor: Theme.elevationShadowColor(level)
+    property real shadowOpacity: 1
+    property real blurMax: Theme.elevationBlurMax
+
+    property alias sourceRect: sourceRect
+
+    layer.enabled: shadowEnabled
+
+    layer.effect: MultiEffect {
+        autoPaddingEnabled: true
+        shadowEnabled: true
+        blurEnabled: false
+        maskEnabled: false
+        shadowBlur: Math.max(0, Math.min(1, root.shadowBlurPx / Math.max(1, root.blurMax)))
+        shadowScale: 1 + (2 * root.shadowSpreadPx) / Math.max(1, Math.min(root.width, root.height))
+        shadowHorizontalOffset: root.shadowOffsetX
+        shadowVerticalOffset: root.shadowOffsetY
+        blurMax: root.blurMax
+        shadowColor: root.shadowColor
+        shadowOpacity: root.shadowOpacity
+    }
+
+    Rectangle {
+        id: sourceRect
+        anchors.fill: parent
+        radius: root.targetRadius
+        color: root.targetColor
+        border.color: root.borderColor
+        border.width: root.borderWidth
+    }
+}
--- a/quickshell/Common/SettingsData.qml
+++ b/quickshell/Common/SettingsData.qml
@@ -173,6 +173,8 @@ Singleton {
    onM3ElevationOpacityChanged: saveSettings()
    property string m3ElevationColorMode: "default"
    onM3ElevationColorModeChanged: saveSettings()
+    property string m3ElevationLightDirection: "top"
+    onM3ElevationLightDirectionChanged: saveSettings()
    property string m3ElevationCustomColor: "#000000"
    onM3ElevationCustomColorChanged: saveSettings()
    property bool modalElevationEnabled: true
--- a/quickshell/Common/Theme.qml
+++ b/quickshell/Common/Theme.qml
@@ -678,38 +678,178 @@ Singleton {

    readonly property real _elevMult: typeof SettingsData !== "undefined" && SettingsData.m3ElevationIntensity !== undefined ? SettingsData.m3ElevationIntensity / 12 : 1
    readonly property real _opMult: typeof SettingsData !== "undefined" && SettingsData.m3ElevationOpacity !== undefined ? SettingsData.m3ElevationOpacity / 60 : 1
+    function normalizeElevationDirection(direction) {
+        switch (direction) {
+        case "top":
+        case "topLeft":
+        case "topRight":
+        case "bottom":
+        case "bottomLeft":
+        case "bottomRight":
+        case "left":
+        case "right":
+        case "autoBar":
+            return direction;
+        default:
+            return "top";
+        }
+    }
+
+    readonly property string elevationLightDirection: {
+        if (typeof SettingsData === "undefined" || !SettingsData.m3ElevationLightDirection)
+            return "top";
+        switch (SettingsData.m3ElevationLightDirection) {
+        case "autoBar":
+        case "top":
+        case "topLeft":
+        case "topRight":
+        case "bottom":
+            return SettingsData.m3ElevationLightDirection;
+        default:
+            return "top";
+        }
+    }
+    readonly property real _elevDiagRatio: 0.55
+    readonly property string _globalElevationDirForTokens: {
+        const normalized = normalizeElevationDirection(elevationLightDirection);
+        return normalized === "autoBar" ? "top" : normalized;
+    }
+    readonly property real _elevDirX: {
+        switch (_globalElevationDirForTokens) {
+        case "topLeft":
+        case "bottomLeft":
+        case "left":
+            return 1;
+        case "topRight":
+        case "bottomRight":
+        case "right":
+            return -1;
+        default:
+            return 0;
+        }
+    }
+    readonly property real _elevDirY: {
+        switch (_globalElevationDirForTokens) {
+        case "bottom":
+        case "bottomLeft":
+        case "bottomRight":
+            return -1;
+        case "left":
+        case "right":
+            return 0;
+        default:
+            return 1;
+        }
+    }
+    readonly property real _elevDirXScale: (_globalElevationDirForTokens === "left" || _globalElevationDirForTokens === "right") ? 1 : _elevDiagRatio

    readonly property var elevationLevel1: ({
            blurPx: 4 * _elevMult,
-            offsetY: 1 * _elevMult,
+            offsetX: 1 * _elevMult * _elevDirXScale * _elevDirX,
+            offsetY: 1 * _elevMult * _elevDirY,
            spreadPx: 0,
            alpha: 0.2 * _opMult
        })
    readonly property var elevationLevel2: ({
            blurPx: 8 * _elevMult,
-            offsetY: 4 * _elevMult,
+            offsetX: 4 * _elevMult * _elevDirXScale * _elevDirX,
+            offsetY: 4 * _elevMult * _elevDirY,
            spreadPx: 0,
            alpha: 0.25 * _opMult
        })
    readonly property var elevationLevel3: ({
            blurPx: 12 * _elevMult,
-            offsetY: 6 * _elevMult,
+            offsetX: 6 * _elevMult * _elevDirXScale * _elevDirX,
+            offsetY: 6 * _elevMult * _elevDirY,
            spreadPx: 0,
            alpha: 0.3 * _opMult
        })
    readonly property var elevationLevel4: ({
            blurPx: 16 * _elevMult,
-            offsetY: 8 * _elevMult,
+            offsetX: 8 * _elevMult * _elevDirXScale * _elevDirX,
+            offsetY: 8 * _elevMult * _elevDirY,
            spreadPx: 0,
            alpha: 0.3 * _opMult
        })
    readonly property var elevationLevel5: ({
            blurPx: 20 * _elevMult,
-            offsetY: 10 * _elevMult,
+            offsetX: 10 * _elevMult * _elevDirXScale * _elevDirX,
+            offsetY: 10 * _elevMult * _elevDirY,
            spreadPx: 0,
            alpha: 0.3 * _opMult
        })

+    function elevationOffsetMagnitude(level, fallback, direction) {
+        if (!level) {
+            return fallback !== undefined ? Math.abs(fallback) : 0;
+        }
+        const yMag = Math.abs(level.offsetY !== undefined ? level.offsetY : 0);
+        if (yMag > 0)
+            return yMag;
+        const xMag = Math.abs(level.offsetX !== undefined ? level.offsetX : 0);
+        if (xMag > 0) {
+            if (direction === "left" || direction === "right")
+                return xMag;
+            return xMag / _elevDiagRatio;
+        }
+        return fallback !== undefined ? Math.abs(fallback) : 0;
+    }
+
+    function elevationOffsetXFor(level, direction, fallback) {
+        const dir = normalizeElevationDirection(direction || elevationLightDirection);
+        const mag = elevationOffsetMagnitude(level, fallback, dir);
+        switch (dir) {
+        case "topLeft":
+        case "bottomLeft":
+            return mag * _elevDiagRatio;
+        case "topRight":
+        case "bottomRight":
+            return -mag * _elevDiagRatio;
+        case "left":
+            return mag;
+        case "right":
+            return -mag;
+        default:
+            return 0;
+        }
+    }
+
+    function elevationOffsetYFor(level, direction, fallback) {
+        const dir = normalizeElevationDirection(direction || elevationLightDirection);
+        const mag = elevationOffsetMagnitude(level, fallback, dir);
+        switch (dir) {
+        case "bottom":
+        case "bottomLeft":
+        case "bottomRight":
+            return -mag;
+        case "left":
+        case "right":
+            return 0;
+        default:
+            return mag;
+        }
+    }
+
+    function elevationOffsetX(level, fallback) {
+        return elevationOffsetXFor(level, elevationLightDirection, fallback);
+    }
+
+    function elevationOffsetY(level, fallback) {
+        return elevationOffsetYFor(level, elevationLightDirection, fallback);
+    }
+
+    function elevationRenderPadding(level, direction, fallbackOffset, extraPadding, minPadding) {
+        const dir = direction !== undefined ? direction : elevationLightDirection;
+        const blur = (level && level.blurPx !== undefined) ? Math.max(0, level.blurPx) : 0;
+        const spread = (level && level.spreadPx !== undefined) ? Math.max(0, level.spreadPx) : 0;
+        const fallback = fallbackOffset !== undefined ? fallbackOffset : 0;
+        const extra = extraPadding !== undefined ? extraPadding : 8;
+        const minPad = minPadding !== undefined ? minPadding : 16;
+        const offsetX = Math.abs(elevationOffsetXFor(level, dir, fallback));
+        const offsetY = Math.abs(elevationOffsetYFor(level, dir, fallback));
+        return Math.max(minPad, blur + spread + Math.max(offsetX, offsetY) + extra);
+    }
+
    function elevationShadowColor(level) {
        const alpha = (level && level.alpha !== undefined) ? level.alpha : 0.3;
        let r = 0;
--- a/quickshell/Common/settings/SettingsSpec.js
+++ b/quickshell/Common/settings/SettingsSpec.js
@@ -50,6 +50,7 @@ var SPEC = {
    m3ElevationIntensity: { def: 12 },
    m3ElevationOpacity: { def: 30 },
    m3ElevationColorMode: { def: "default" },
+    m3ElevationLightDirection: { def: "top" },
    m3ElevationCustomColor: { def: "#000000" },
    modalElevationEnabled: { def: true },
    popoutElevationEnabled: { def: true },
--- a/quickshell/Modals/Common/DankModal.qml
+++ b/quickshell/Modals/Common/DankModal.qml
@@ -1,5 +1,4 @@
 import QtQuick
-import QtQuick.Effects
 import Quickshell
 import Quickshell.Wayland
 import qs.Common
@@ -143,7 +142,11 @@ Item {
        }
    }

-    readonly property real shadowBuffer: Theme.elevationBlurMax * 1.5 + 24
+    readonly property var shadowLevel: Theme.elevationLevel3
+    readonly property real shadowFallbackOffset: 6
+    readonly property real shadowRenderPadding: (root.enableShadow && Theme.elevationEnabled && SettingsData.modalElevationEnabled) ? Theme.elevationRenderPadding(shadowLevel, Theme.elevationLightDirection, shadowFallbackOffset, 8, 16) : 0
+    readonly property real shadowMotionPadding: animationType === "slide" ? 30 : Math.max(0, animationOffset)
+    readonly property real shadowBuffer: Theme.snap(shadowRenderPadding + shadowMotionPadding, dpr)
    readonly property real alignedWidth: Theme.px(modalWidth, dpr)
    readonly property real alignedHeight: Theme.px(modalHeight, dpr)

@@ -378,34 +381,16 @@ Item {
                        }
                    }

-                    readonly property var elev: Theme.elevationLevel3
-                    readonly property real shadowBlurNorm: Math.max(0, Math.min(1, (elev && elev.blurPx !== undefined ? elev.blurPx : 12) / Theme.elevationBlurMax))
-
-                    Item {
+                    ElevationShadow {
                        id: modalShadowLayer
                        anchors.fill: parent
-                        layer.enabled: root.enableShadow && Theme.elevationEnabled && SettingsData.modalElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
-
-                        layer.effect: MultiEffect {
-                            autoPaddingEnabled: true
-                            shadowEnabled: true
-                            blurEnabled: false
-                            maskEnabled: false
-                            shadowBlur: animatedContent.shadowBlurNorm
-                            shadowScale: 1
-                            shadowVerticalOffset: animatedContent.elev && animatedContent.elev.offsetY !== undefined ? animatedContent.elev.offsetY : 6
-                            shadowHorizontalOffset: 0
-                            blurMax: Theme.elevationBlurMax
-                            shadowColor: Theme.elevationShadowColor(Theme.elevationLevel3)
-                        }
-
-                        Rectangle {
-                            anchors.fill: parent
-                            radius: root.cornerRadius
-                            color: root.backgroundColor
-                            border.color: root.borderColor
-                            border.width: root.borderWidth
-                        }
+                        level: root.shadowLevel
+                        fallbackOffset: root.shadowFallbackOffset
+                        targetRadius: root.cornerRadius
+                        targetColor: root.backgroundColor
+                        borderColor: root.borderColor
+                        borderWidth: root.borderWidth
+                        shadowEnabled: root.enableShadow && Theme.elevationEnabled && SettingsData.modalElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
                    }

                    FocusScope {
--- a/quickshell/Modals/DankLauncherV2/DankLauncherV2Modal.qml
+++ b/quickshell/Modals/DankLauncherV2/DankLauncherV2Modal.qml
@@ -391,30 +391,16 @@ Item {
                }
            }

-            Item {
+            ElevationShadow {
                id: launcherShadowLayer
                anchors.fill: parent
-                layer.enabled: Theme.elevationEnabled && SettingsData.modalElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
-                layer.effect: MultiEffect {
-                    autoPaddingEnabled: true
-                    shadowEnabled: true
-                    blurEnabled: false
-                    maskEnabled: false
-                    shadowBlur: Math.max(0, Math.min(1, Theme.elevationLevel3.blurPx / Theme.elevationBlurMax))
-                    shadowScale: 1
-                    shadowVerticalOffset: Theme.elevationLevel3.offsetY
-                    shadowHorizontalOffset: 0
-                    blurMax: Theme.elevationBlurMax
-                    shadowColor: Theme.elevationShadowColor(Theme.elevationLevel3)
-                }
-
-                Rectangle {
-                    anchors.fill: parent
-                    color: root.backgroundColor
-                    border.color: root.borderColor
-                    border.width: root.borderWidth
-                    radius: root.cornerRadius
-                }
+                level: Theme.elevationLevel3
+                fallbackOffset: 6
+                targetColor: root.backgroundColor
+                borderColor: root.borderColor
+                borderWidth: root.borderWidth
+                targetRadius: root.cornerRadius
+                shadowEnabled: Theme.elevationEnabled && SettingsData.modalElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
            }

            MouseArea {
--- a/quickshell/Modules/ControlCenter/ControlCenterPopout.qml
+++ b/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
--- a/quickshell/Modules/DankBar/BarCanvas.qml
+++ b/quickshell/Modules/DankBar/BarCanvas.qml
@@ -1,5 +1,4 @@
 import QtQuick
-import QtQuick.Effects
 import QtQuick.Shapes
 import qs.Common
 import qs.Services
@@ -56,9 +55,33 @@ Item {
    // M3 elevation shadow — Level 2 baseline (navigation bar), with per-bar override support
    readonly property bool hasPerBarOverride: (barConfig?.shadowIntensity ?? 0) > 0
    readonly property var elevLevel: Theme.elevationLevel2
-    readonly property bool shadowEnabled: (Theme.elevationEnabled
-        && (typeof SettingsData !== "undefined" ? (SettingsData.barElevationEnabled ?? true) : false))
-        || hasPerBarOverride
+    readonly property bool shadowEnabled: (Theme.elevationEnabled && (typeof SettingsData !== "undefined" ? (SettingsData.barElevationEnabled ?? true) : false)) || hasPerBarOverride
+    readonly property string autoBarShadowDirection: isTop ? "top" : (isBottom ? "bottom" : (isLeft ? "left" : (isRight ? "right" : "top")))
+    readonly property string globalShadowDirection: Theme.elevationLightDirection === "autoBar" ? autoBarShadowDirection : Theme.elevationLightDirection
+    readonly property string perBarShadowDirectionMode: barConfig?.shadowDirectionMode ?? "inherit"
+    readonly property string perBarManualShadowDirection: {
+        switch (barConfig?.shadowDirection) {
+        case "top":
+        case "topLeft":
+        case "topRight":
+        case "bottom":
+            return barConfig.shadowDirection;
+        default:
+            return "top";
+        }
+    }
+    readonly property string effectiveShadowDirection: {
+        if (!hasPerBarOverride)
+            return globalShadowDirection;
+        switch (perBarShadowDirectionMode) {
+        case "autoBar":
+            return autoBarShadowDirection;
+        case "manual":
+            return perBarManualShadowDirection === "autoBar" ? autoBarShadowDirection : perBarManualShadowDirection;
+        default:
+            return globalShadowDirection;
+        }
+    }

    // Per-bar override values (when barConfig.shadowIntensity > 0)
    readonly property real overrideBlurPx: (barConfig?.shadowIntensity ?? 0) * 0.2
@@ -81,13 +104,10 @@ 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 shadowOffsetY: hasPerBarOverride
-        ? overrideBlurPx * 0.5
-        : (elevLevel.offsetY ?? 4)
+    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)
+    readonly property real shadowOffsetY: Theme.elevationOffsetYFor(hasPerBarOverride ? null : elevLevel, effectiveShadowDirection, shadowOffsetMagnitude)

    readonly property string mainPath: generatePathForPosition(width, height)
    readonly property string borderFullPath: generateBorderFullPath(width, height)
@@ -131,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.isTop ? root.shadowOffsetY : (root.isBottom ? -root.shadowOffsetY : 0)
-                shadowHorizontalOffset: root.isLeft ? root.shadowOffsetY : (root.isRight ? -root.shadowOffsetY : 0)
-                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 {
--- a/quickshell/Modules/DankBar/DankBarWindow.qml
+++ b/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
--- a/quickshell/Modules/DankBar/Widgets/Media.qml
+++ b/quickshell/Modules/DankBar/Widgets/Media.qml
@@ -178,8 +178,9 @@ BasePill {
                            if (root.popoutTarget && root.popoutTarget.setTriggerPosition) {
                                const globalPos = parent.mapToItem(null, 0, 0);
                                const currentScreen = root.parentScreen || Screen;
-                                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, root.barThickness, parent.width);
-                                root.popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, root.section, currentScreen);
+                                const barPosition = root.axis?.edge === "left" ? 2 : (root.axis?.edge === "right" ? 3 : (root.axis?.edge === "top" ? 0 : 1));
+                                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, root.barThickness, parent.width, root.barSpacing, barPosition, root.barConfig);
+                                root.popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, root.section, currentScreen, barPosition, root.barThickness, root.barSpacing, root.barConfig);
                            }
                            root.clicked();
                        }
@@ -334,8 +335,9 @@ BasePill {
                                if (root.popoutTarget && root.popoutTarget.setTriggerPosition) {
                                    const globalPos = mapToItem(null, 0, 0);
                                    const currentScreen = root.parentScreen || Screen;
-                                    const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, root.barThickness, root.width);
-                                    root.popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, root.section, currentScreen);
+                                    const barPosition = root.axis?.edge === "left" ? 2 : (root.axis?.edge === "right" ? 3 : (root.axis?.edge === "top" ? 0 : 1));
+                                    const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, root.barThickness, root.width, root.barSpacing, barPosition, root.barConfig);
+                                    root.popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, root.section, currentScreen, barPosition, root.barThickness, root.barSpacing, root.barConfig);
                                }
                                root.clicked();
                            }
--- a/quickshell/Modules/DankBar/Widgets/SystemTrayBar.qml
+++ b/quickshell/Modules/DankBar/Widgets/SystemTrayBar.qml
@@ -964,37 +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))
-                    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 {
@@ -1437,35 +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))
-                            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 {
--- a/quickshell/Modules/DankBar/Widgets/SystemUpdate.qml
+++ b/quickshell/Modules/DankBar/Widgets/SystemUpdate.qml
@@ -177,8 +177,9 @@ BasePill {
            if (popoutTarget && popoutTarget.setTriggerPosition) {
                const globalPos = root.visualContent.mapToItem(null, 0, 0);
                const currentScreen = parentScreen || Screen;
-                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, root.visualWidth);
-                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen);
+                const barPosition = root.axis?.edge === "left" ? 2 : (root.axis?.edge === "right" ? 3 : (root.axis?.edge === "top" ? 0 : 1));
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, root.visualWidth, root.barSpacing, barPosition, root.barConfig);
+                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen, barPosition, barThickness, root.barSpacing, root.barConfig);
            }
            root.clicked();
        }
--- a/quickshell/Modules/DankDash/MediaDropdownOverlay.qml
+++ b/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: 0
-                shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 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: 0
-                shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 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: 0
-                shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 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 {
--- a/quickshell/Modules/DankDash/MediaPlayerTab.qml
+++ b/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: 0
-                                    shadowVerticalOffset: Theme.elevationLevel1 && Theme.elevationLevel1.offsetY !== undefined ? Theme.elevationLevel1.offsetY : 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
                                }
                            }
                        }
--- a/quickshell/Modules/DankDash/WeatherTab.qml
+++ b/quickshell/Modules/DankDash/WeatherTab.qml
@@ -244,8 +244,8 @@ Item {
                            layer.enabled: Theme.elevationEnabled
                            layer.effect: MultiEffect {
                                shadowEnabled: Theme.elevationEnabled
-                                shadowHorizontalOffset: 0
-                                shadowVerticalOffset: Theme.elevationLevel1 && Theme.elevationLevel1.offsetY !== undefined ? Theme.elevationLevel1.offsetY : 1
+                                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)
@@ -816,8 +816,8 @@ Item {
                    layer.enabled: Theme.elevationEnabled
                    layer.effect: MultiEffect {
                        shadowEnabled: Theme.elevationEnabled
-                        shadowHorizontalOffset: 0
-                        shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
+                        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)
@@ -838,8 +838,8 @@ Item {
                    layer.enabled: Theme.elevationEnabled
                    layer.effect: MultiEffect {
                        shadowEnabled: Theme.elevationEnabled
-                        shadowHorizontalOffset: 0
-                        shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
+                        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)
--- a/quickshell/Modules/Notifications/Center/HistoryNotificationCard.qml
+++ b/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.elevationLevel1 && Theme.elevationLevel1.offsetY !== undefined) ? Theme.elevationLevel1.offsetY : 1
-            shadowHorizontalOffset: 0
-            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: {
--- a/quickshell/Modules/Notifications/Center/NotificationCard.qml
+++ b/quickshell/Modules/Notifications/Center/NotificationCard.qml
@@ -45,7 +45,8 @@ Rectangle {
    readonly property real baseShadowBlurPx: (shadowElevation && shadowElevation.blurPx !== undefined) ? shadowElevation.blurPx : 4
    readonly property real hoverShadowBlurBoost: cardHoverHandler.hovered ? Math.min(2, baseShadowBlurPx * 0.25) : 0
    property real shadowBlurPx: shadowsAllowed ? (baseShadowBlurPx + hoverShadowBlurBoost) : 0
-    property real shadowOffsetYPx: shadowsAllowed ? (1 + (cardHoverHandler.hovered ? 0.35 : 0)) : 0
+    property real shadowOffsetXPx: shadowsAllowed ? Theme.elevationOffsetX(shadowElevation) : 0
+    property real shadowOffsetYPx: shadowsAllowed ? (Theme.elevationOffsetY(shadowElevation, 1) + (cardHoverHandler.hovered ? 0.35 : 0)) : 0
    property bool __initialized: false

    Component.onCompleted: {
@@ -70,6 +71,13 @@ Rectangle {
        }
    }

+    Behavior on shadowOffsetXPx {
+        NumberAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+    }
+
    Behavior on shadowOffsetYPx {
        NumberAnimation {
            duration: Theme.shortDuration
@@ -124,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: 0
-            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 {
--- a/quickshell/Modules/Notifications/Center/NotificationCenterPopout.qml
+++ b/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
--- a/quickshell/Modules/Notifications/Popup/NotificationPopup.qml
+++ b/quickshell/Modules/Notifications/Popup/NotificationPopup.qml
@@ -185,8 +185,9 @@ PanelWindow {
    property bool isBottomCenter: SettingsData.notificationPopupPosition === SettingsData.Position.BottomCenter
    property bool isCenterPosition: isTopCenter || isBottomCenter
    readonly property real maxPopupShadowBlurPx: Math.max((Theme.elevationLevel3 && Theme.elevationLevel3.blurPx !== undefined) ? Theme.elevationLevel3.blurPx : 12, (Theme.elevationLevel4 && Theme.elevationLevel4.blurPx !== undefined) ? Theme.elevationLevel4.blurPx : 16)
-    readonly property real maxPopupShadowOffsetYPx: Math.max(Math.abs((Theme.elevationLevel3 && Theme.elevationLevel3.offsetY !== undefined) ? Theme.elevationLevel3.offsetY : 6), Math.abs((Theme.elevationLevel4 && Theme.elevationLevel4.offsetY !== undefined) ? Theme.elevationLevel4.offsetY : 8))
-    readonly property real windowShadowPad: Theme.elevationEnabled && SettingsData.notificationPopupShadowEnabled ? Theme.snap(Math.max(16, maxPopupShadowBlurPx + maxPopupShadowOffsetYPx + 8), dpr) : 0
+    readonly property real maxPopupShadowOffsetXPx: Math.max(Math.abs(Theme.elevationOffsetX(Theme.elevationLevel3)), Math.abs(Theme.elevationOffsetX(Theme.elevationLevel4)))
+    readonly property real maxPopupShadowOffsetYPx: Math.max(Math.abs(Theme.elevationOffsetY(Theme.elevationLevel3, 6)), Math.abs(Theme.elevationOffsetY(Theme.elevationLevel4, 8)))
+    readonly property real windowShadowPad: Theme.elevationEnabled && SettingsData.notificationPopupShadowEnabled ? Theme.snap(Math.max(16, maxPopupShadowBlurPx + Math.max(maxPopupShadowOffsetXPx, maxPopupShadowOffsetYPx) + 8), dpr) : 0

    anchors.top: true
    anchors.left: true
@@ -354,9 +355,10 @@ PanelWindow {
        readonly property bool shadowsAllowed: Theme.elevationEnabled && SettingsData.notificationPopupShadowEnabled
        readonly property var elevLevel: cardHoverHandler.hovered ? Theme.elevationLevel4 : Theme.elevationLevel3
        readonly property real cardInset: Theme.snap(4, win.dpr)
-        readonly property real shadowRenderPadding: shadowsAllowed ? Theme.snap(Math.max(16, shadowBlurPx + Math.abs(shadowOffsetY) + 8), win.dpr) : 0
+        readonly property real shadowRenderPadding: shadowsAllowed ? Theme.snap(Math.max(16, shadowBlurPx + Math.max(Math.abs(shadowOffsetX), Math.abs(shadowOffsetY)) + 8), win.dpr) : 0
        property real shadowBlurPx: shadowsAllowed ? (elevLevel && elevLevel.blurPx !== undefined ? elevLevel.blurPx : 12) : 0
-        property real shadowOffsetY: shadowsAllowed ? (elevLevel && elevLevel.offsetY !== undefined ? elevLevel.offsetY : 6) : 0
+        property real shadowOffsetX: shadowsAllowed ? Theme.elevationOffsetX(elevLevel) : 0
+        property real shadowOffsetY: shadowsAllowed ? Theme.elevationOffsetY(elevLevel, 6) : 0

        Behavior on shadowBlurPx {
            NumberAnimation {
@@ -365,6 +367,13 @@ PanelWindow {
            }
        }

+        Behavior on shadowOffsetX {
+            NumberAnimation {
+                duration: Theme.shortDuration
+                easing.type: Theme.standardEasing
+            }
+        }
+
        Behavior on shadowOffsetY {
            NumberAnimation {
                duration: Theme.shortDuration
@@ -372,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: 0
-                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
--- a/quickshell/Modules/Settings/AboutTab.qml
+++ b/quickshell/Modules/Settings/AboutTab.qml
@@ -878,14 +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
-            shadowVerticalOffset: Theme.elevationLevel1 && Theme.elevationLevel1.offsetY !== undefined ? Theme.elevationLevel1.offsetY : 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 {
--- a/quickshell/Modules/Settings/DankBarTab.qml
+++ b/quickshell/Modules/Settings/DankBarTab.qml
@@ -140,6 +140,8 @@ Item {
            scrollYBehavior: defaultBar.scrollYBehavior ?? "workspace",
            shadowIntensity: defaultBar.shadowIntensity ?? 0,
            shadowOpacity: defaultBar.shadowOpacity ?? 60,
+            shadowDirectionMode: defaultBar.shadowDirectionMode ?? "inherit",
+            shadowDirection: defaultBar.shadowDirection ?? "top",
            shadowColorMode: defaultBar.shadowColorMode ?? "default",
            shadowCustomColor: defaultBar.shadowCustomColor ?? "#000000"
        };
@@ -1053,6 +1055,7 @@ Item {

                readonly property bool shadowActive: (selectedBarConfig?.shadowIntensity ?? 0) > 0
                readonly property bool isCustomColor: (selectedBarConfig?.shadowColorMode ?? "default") === "custom"
+                readonly property string directionSource: selectedBarConfig?.shadowDirectionMode ?? "inherit"

                StyledText {
                    width: parent.width
@@ -1107,6 +1110,78 @@ Item {
                        })
                }

+                SettingsDropdownRow {
+                    visible: shadowCard.shadowActive
+                    text: I18n.tr("Direction Source", "bar shadow direction source")
+                    description: I18n.tr("Choose how this bar resolves shadow direction")
+                    settingKey: "barShadowDirectionSource"
+                    options: [I18n.tr("Inherit Global (Default)", "bar shadow direction source option"), I18n.tr("Auto (Bar-aware)", "bar shadow direction source option"), I18n.tr("Manual", "bar shadow direction source option")]
+                    currentValue: {
+                        switch (shadowCard.directionSource) {
+                        case "autoBar":
+                            return I18n.tr("Auto (Bar-aware)", "bar shadow direction source option");
+                        case "manual":
+                            return I18n.tr("Manual", "bar shadow direction source option");
+                        default:
+                            return I18n.tr("Inherit Global (Default)", "bar shadow direction source option");
+                        }
+                    }
+                    onValueChanged: value => {
+                        if (value === I18n.tr("Auto (Bar-aware)", "bar shadow direction source option")) {
+                            SettingsData.updateBarConfig(selectedBarId, {
+                                shadowDirectionMode: "autoBar"
+                            });
+                        } else if (value === I18n.tr("Manual", "bar shadow direction source option")) {
+                            SettingsData.updateBarConfig(selectedBarId, {
+                                shadowDirectionMode: "manual"
+                            });
+                        } else {
+                            SettingsData.updateBarConfig(selectedBarId, {
+                                shadowDirectionMode: "inherit"
+                            });
+                        }
+                    }
+                }
+
+                SettingsDropdownRow {
+                    visible: shadowCard.shadowActive && shadowCard.directionSource === "manual"
+                    text: I18n.tr("Manual Direction", "bar manual shadow direction")
+                    description: I18n.tr("Use a fixed shadow direction for this bar")
+                    settingKey: "barShadowDirectionManual"
+                    options: [I18n.tr("Top", "shadow direction option"), I18n.tr("Top Left", "shadow direction option"), I18n.tr("Top Right", "shadow direction option"), I18n.tr("Bottom", "shadow direction option")]
+                    currentValue: {
+                        switch (selectedBarConfig?.shadowDirection) {
+                        case "topLeft":
+                            return I18n.tr("Top Left", "shadow direction option");
+                        case "topRight":
+                            return I18n.tr("Top Right", "shadow direction option");
+                        case "bottom":
+                            return I18n.tr("Bottom", "shadow direction option");
+                        default:
+                            return I18n.tr("Top", "shadow direction option");
+                        }
+                    }
+                    onValueChanged: value => {
+                        if (value === I18n.tr("Top Left", "shadow direction option")) {
+                            SettingsData.updateBarConfig(selectedBarId, {
+                                shadowDirection: "topLeft"
+                            });
+                        } else if (value === I18n.tr("Top Right", "shadow direction option")) {
+                            SettingsData.updateBarConfig(selectedBarId, {
+                                shadowDirection: "topRight"
+                            });
+                        } else if (value === I18n.tr("Bottom", "shadow direction option")) {
+                            SettingsData.updateBarConfig(selectedBarId, {
+                                shadowDirection: "bottom"
+                            });
+                        } else {
+                            SettingsData.updateBarConfig(selectedBarId, {
+                                shadowDirection: "top"
+                            });
+                        }
+                    }
+                }
+
                Column {
                    visible: shadowCard.shadowActive
                    width: parent.width
--- a/quickshell/Modules/Settings/ThemeColorsTab.qml
+++ b/quickshell/Modules/Settings/ThemeColorsTab.qml
@@ -1680,6 +1680,43 @@ Item {
                    }
                }

+                SettingsDropdownRow {
+                    tab: "theme"
+                    tags: ["elevation", "shadow", "direction", "light", "advanced", "m3"]
+                    settingKey: "m3ElevationLightDirection"
+                    text: I18n.tr("Light Direction")
+                    description: I18n.tr("Controls shadow cast direction for elevation layers")
+                    options: [I18n.tr("Auto (Bar-aware)", "shadow direction option"), I18n.tr("Top (Default)", "shadow direction option"), I18n.tr("Top Left", "shadow direction option"), I18n.tr("Top Right", "shadow direction option"), I18n.tr("Bottom", "shadow direction option")]
+                    currentValue: {
+                        switch (SettingsData.m3ElevationLightDirection) {
+                        case "autoBar":
+                            return I18n.tr("Auto (Bar-aware)", "shadow direction option");
+                        case "topLeft":
+                            return I18n.tr("Top Left", "shadow direction option");
+                        case "topRight":
+                            return I18n.tr("Top Right", "shadow direction option");
+                        case "bottom":
+                            return I18n.tr("Bottom", "shadow direction option");
+                        default:
+                            return I18n.tr("Top (Default)", "shadow direction option");
+                        }
+                    }
+                    visible: SettingsData.m3ElevationEnabled ?? true
+                    onValueChanged: value => {
+                        if (value === I18n.tr("Auto (Bar-aware)", "shadow direction option")) {
+                            SettingsData.set("m3ElevationLightDirection", "autoBar");
+                        } else if (value === I18n.tr("Top Left", "shadow direction option")) {
+                            SettingsData.set("m3ElevationLightDirection", "topLeft");
+                        } else if (value === I18n.tr("Top Right", "shadow direction option")) {
+                            SettingsData.set("m3ElevationLightDirection", "topRight");
+                        } else if (value === I18n.tr("Bottom", "shadow direction option")) {
+                            SettingsData.set("m3ElevationLightDirection", "bottom");
+                        } else {
+                            SettingsData.set("m3ElevationLightDirection", "top");
+                        }
+                    }
+                }
+
                Item {
                    visible: (SettingsData.m3ElevationEnabled ?? true) && SettingsData.m3ElevationColorMode === "custom"
                    width: parent.width
--- a/quickshell/Modules/Settings/TimeWeatherTab.qml
+++ b/quickshell/Modules/Settings/TimeWeatherTab.qml
@@ -666,8 +666,8 @@ Item {
                                layer.enabled: Theme.elevationEnabled
                                layer.effect: MultiEffect {
                                    shadowEnabled: Theme.elevationEnabled
-                                    shadowHorizontalOffset: 0
-                                    shadowVerticalOffset: Theme.elevationLevel1 && Theme.elevationLevel1.offsetY !== undefined ? Theme.elevationLevel1.offsetY : 1
+                                    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)
--- a/quickshell/Modules/Toast.qml
+++ b/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: 0
-            shadowVerticalOffset: Theme.elevationLevel3 && Theme.elevationLevel3.offsetY !== undefined ? Theme.elevationLevel3.offsetY : 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 {
--- a/quickshell/Modules/WorkspaceOverlays/OverviewWidget.qml
+++ b/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: 0
-            shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 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 {
--- a/quickshell/Widgets/DankDropdown.qml
+++ b/quickshell/Widgets/DankDropdown.qml
@@ -1,7 +1,6 @@
 import "../Common/fzf.js" as Fzf
 import QtQuick
 import QtQuick.Controls
-import QtQuick.Effects
 import Quickshell
 import qs.Common
 import qs.Widgets
@@ -263,30 +262,17 @@ Item {
            border.width: 2
            radius: Theme.cornerRadius

-            Item {
+            ElevationShadow {
                id: shadowLayer
                anchors.fill: parent
                z: -1
-
-                layer.enabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled
-                layer.effect: MultiEffect {
-                    autoPaddingEnabled: true
-                    blurEnabled: false
-                    maskEnabled: false
-                    shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled
-                    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)
-                    shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
-                }
-
-                Rectangle {
-                    anchors.fill: parent
-                    radius: contentSurface.radius
-                    color: contentSurface.color
-                    border.color: contentSurface.border.color
-                    border.width: contentSurface.border.width
-                }
+                level: Theme.elevationLevel2
+                fallbackOffset: 4
+                targetRadius: contentSurface.radius
+                targetColor: contentSurface.color
+                borderColor: contentSurface.border.color
+                borderWidth: contentSurface.border.width
+                shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled
            }

            Column {
--- a/quickshell/Widgets/DankIconPicker.qml
+++ b/quickshell/Widgets/DankIconPicker.qml
@@ -1,6 +1,5 @@
 import QtQuick
 import QtQuick.Controls
-import QtQuick.Effects
 import qs.Common
 import qs.Widgets

@@ -136,28 +135,16 @@ Rectangle {
            color: Theme.surface
            radius: Theme.cornerRadius

-            Item {
+            ElevationShadow {
                id: shadowLayer
                anchors.fill: parent
                z: -1
-
-                layer.enabled: Theme.elevationEnabled
-                layer.effect: MultiEffect {
-                    autoPaddingEnabled: true
-                    shadowEnabled: Theme.elevationEnabled
-                    blurMax: Theme.elevationBlurMax
-                    shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
-                    shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
-                    shadowHorizontalOffset: 0
-                    shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
-                    shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
-                }
-
-                Rectangle {
-                    anchors.fill: parent
-                    radius: contentSurface.radius
-                    color: contentSurface.color
-                }
+                level: Theme.elevationLevel2
+                fallbackOffset: 4
+                targetRadius: contentSurface.radius
+                targetColor: contentSurface.color
+                shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
+                shadowEnabled: Theme.elevationEnabled
            }

            Rectangle {
--- a/quickshell/Widgets/DankOSD.qml
+++ b/quickshell/Widgets/DankOSD.qml
@@ -1,5 +1,4 @@
 import QtQuick
-import QtQuick.Effects
 import Quickshell
 import Quickshell.Wayland
 import qs.Common
@@ -257,12 +256,7 @@ PanelWindow {
        scale: shouldBeVisible ? 1 : 0.9

        property bool childHovered: false
-        readonly property var elev: Theme.elevationLevel3
-        property real shadowBlurPx: elev && elev.blurPx !== undefined ? elev.blurPx : 12
-        property real shadowSpreadPx: elev && elev.spreadPx !== undefined ? elev.spreadPx : 0
-        property real shadowBaseAlpha: elev && elev.alpha !== undefined ? elev.alpha : 0.3
        readonly property real popupSurfaceAlpha: SettingsData.popupTransparency
-        readonly property real effectiveShadowAlpha: shouldBeVisible ? Math.max(0, Math.min(1, shadowBaseAlpha * popupSurfaceAlpha)) : 0

        Rectangle {
            id: background
@@ -274,35 +268,20 @@ PanelWindow {
            z: -1
        }

-        Item {
+        ElevationShadow {
            id: bgShadowLayer
            anchors.fill: parent
            visible: osdContainer.popupSurfaceAlpha >= 0.95
-            layer.enabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
+            z: -1
+            level: Theme.elevationLevel3
+            fallbackOffset: 6
+            targetRadius: Theme.cornerRadius
+            targetColor: Theme.surfaceContainer
+            borderColor: Theme.outlineMedium
+            borderWidth: 1
+            shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
            layer.textureSize: Qt.size(Math.round(width * root.dpr), Math.round(height * root.dpr))
            layer.textureMirroring: ShaderEffectSource.MirrorVertically
-
-            readonly property int blurMax: Theme.elevationBlurMax
-
-            layer.effect: MultiEffect {
-                id: shadowFx
-                autoPaddingEnabled: true
-                shadowEnabled: true
-                blurEnabled: false
-                maskEnabled: false
-                shadowBlur: Math.max(0, Math.min(1, osdContainer.shadowBlurPx / bgShadowLayer.blurMax))
-                shadowScale: 1 + (2 * osdContainer.shadowSpreadPx) / Math.max(1, Math.min(bgShadowLayer.width, bgShadowLayer.height))
-                blurMax: Theme.elevationBlurMax
-                shadowColor: Theme.elevationShadowColor(Theme.elevationLevel3)
-            }
-
-            Rectangle {
-                anchors.fill: parent
-                radius: Theme.cornerRadius
-                color: Theme.surfaceContainer
-                border.color: Theme.outlineMedium
-                border.width: 1
-            }
        }

        MouseArea {
--- a/quickshell/Widgets/DankPopout.qml
+++ b/quickshell/Widgets/DankPopout.qml
@@ -1,5 +1,4 @@
 import QtQuick
-import QtQuick.Effects
 import Quickshell
 import Quickshell.Wayland
 import qs.Common
@@ -78,6 +77,38 @@ Item {

    property int effectiveBarPosition: 0
    property real effectiveBarBottomGap: 0
+    readonly property string autoBarShadowDirection: {
+        const section = triggerSection || "center";
+        switch (effectiveBarPosition) {
+        case SettingsData.Position.Top:
+            if (section === "left")
+                return "topLeft";
+            if (section === "right")
+                return "topRight";
+            return "top";
+        case SettingsData.Position.Bottom:
+            if (section === "left")
+                return "bottomLeft";
+            if (section === "right")
+                return "bottomRight";
+            return "bottom";
+        case SettingsData.Position.Left:
+            if (section === "left")
+                return "topLeft";
+            if (section === "right")
+                return "bottomLeft";
+            return "left";
+        case SettingsData.Position.Right:
+            if (section === "left")
+                return "topRight";
+            if (section === "right")
+                return "bottomRight";
+            return "right";
+        default:
+            return "top";
+        }
+    }
+    readonly property string effectiveShadowDirection: Theme.elevationLightDirection === "autoBar" ? autoBarShadowDirection : Theme.elevationLightDirection

    // Snapshot mask geometry to prevent background damage on bar updates
    property real _frozenMaskX: 0
@@ -207,7 +238,11 @@ Item {
    readonly property real screenHeight: screen ? screen.height : 0
    readonly property real dpr: screen ? screen.devicePixelRatio : 1

-    readonly property real shadowBuffer: Theme.elevationBlurMax * 1.5 + 24
+    readonly property var shadowLevel: Theme.elevationLevel3
+    readonly property real shadowFallbackOffset: 6
+    readonly property real shadowRenderPadding: (Theme.elevationEnabled && SettingsData.popoutElevationEnabled) ? Theme.elevationRenderPadding(shadowLevel, effectiveShadowDirection, shadowFallbackOffset, 8, 16) : 0
+    readonly property real shadowMotionPadding: Math.max(0, animationOffset)
+    readonly property real shadowBuffer: Theme.snap(shadowRenderPadding + shadowMotionPadding, dpr)
    readonly property real alignedWidth: Theme.px(popupWidth, dpr)
    readonly property real alignedHeight: Theme.px(popupHeight, dpr)

@@ -491,40 +526,20 @@ Item {
                }
            }

-            Rectangle {
+            ElevationShadow {
                id: shadowSource
-                anchors.centerIn: parent
                width: parent.width
                height: parent.height
-                radius: Theme.cornerRadius
-                color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
                opacity: contentWrapper.opacity
                scale: contentWrapper.scale
                x: contentWrapper.x
                y: contentWrapper.y
-
-                readonly property var elev: Theme.elevationLevel3
-                property real shadowBlurPx: elev && elev.blurPx !== undefined ? elev.blurPx : 12
-                property real shadowSpreadPx: elev && elev.spreadPx !== undefined ? elev.spreadPx : 0
-                property real shadowBaseAlpha: elev && elev.alpha !== undefined ? elev.alpha : 0.3
-                readonly property real popupSurfaceAlpha: SettingsData.popupTransparency
-                readonly property real effectiveShadowAlpha: Math.max(0, Math.min(1, shadowBaseAlpha * popupSurfaceAlpha))
-                readonly property int blurMax: Theme.elevationBlurMax
-
-                layer.enabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1" && !(root.suspendShadowWhileResizing && root._resizeActive)
-
-                layer.effect: MultiEffect {
-                    id: shadowFx
-                    autoPaddingEnabled: true
-                    shadowEnabled: true
-                    blurEnabled: false
-                    maskEnabled: false
-                    shadowBlur: Math.max(0, Math.min(1, shadowSource.shadowBlurPx / shadowSource.blurMax))
-                    shadowScale: 1 + (2 * shadowSource.shadowSpreadPx) / Math.max(1, Math.min(shadowSource.width, shadowSource.height))
-                    shadowVerticalOffset: parent.elev && parent.elev.offsetY !== undefined ? parent.elev.offsetY : 6
-                    blurMax: Theme.elevationBlurMax
-                    shadowColor: Theme.elevationShadowColor(Theme.elevationLevel3)
-                }
+                level: root.shadowLevel
+                direction: root.effectiveShadowDirection
+                fallbackOffset: root.shadowFallbackOffset
+                targetRadius: Theme.cornerRadius
+                targetColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+                shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1" && !(root.suspendShadowWhileResizing && root._resizeActive)
            }

            Item {
Author	SHA1	Message	Date
purian23	1452c85946	Finalize m3 shadow & elevation	2026-03-01 00:43:46 -05:00
purian23	36951f82c6	Implement Auto-Bar location aware shadowing	2026-02-28 17:54:03 -05:00