use multieffect for shadows

.config/quickshell/modules/cheatsheet/Cheatsheet.qml

@@ -5,8 +5,8 @@ import "root:/modules/common/widgets"
 import "root:/modules/common/functions/color_utils.js" as ColorUtils
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Effects
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
 import Quickshell.Io
 import Quickshell
 import Quickshell.Widgets
@@ -65,6 +65,16 @@ Scope { // Scope
                 implicitWidth: cheatsheetColumnLayout.implicitWidth + padding * 2
                 implicitHeight: cheatsheetColumnLayout.implicitHeight + padding * 2
 
+                layer.enabled: true
+                layer.effect: MultiEffect {
+                    source: cheatsheetBackground
+                    anchors.fill: cheatsheetBackground
+                    shadowEnabled: true
+                    shadowVerticalOffset: 1
+                    shadowColor: Appearance.colors.colShadow
+                    shadowBlur: 0.5
+                }
+
                 Keys.onPressed: (event) => { // Esc to close
                     if (event.key === Qt.Key_Escape) {
                         cheatsheetRoot.hide()
@@ -124,17 +134,6 @@ Scope { // Scope
                 }
             }
 
-            // Shadow
-            DropShadow {
-                anchors.fill: cheatsheetBackground
-                horizontalOffset: 0
-                verticalOffset: 2
-                radius: Appearance.sizes.elevationMargin
-                samples: Appearance.sizes.elevationMargin * 2 + 1 // Ideally should be 2 * radius + 1, see qt docs
-                color: Appearance.colors.colShadow
-                source: cheatsheetBackground
-            }
-
         }
     }
 

.config/quickshell/modules/common/Appearance.qml

@@ -261,7 +261,7 @@ Singleton {
         property real searchWidthCollapsed: 260
         property real searchWidth: 450
         property real hyprlandGapsOut: 5
-        property real elevationMargin: 7
+        property real elevationMargin: 8
         property real fabShadowRadius: 5
         property real fabHoveredShadowRadius: 7
     }

.config/quickshell/modules/common/widgets/NotificationWidget.qml

@@ -5,6 +5,7 @@ import "root:/modules/common/functions/color_utils.js" as ColorUtils
 import Qt5Compat.GraphicalEffects
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Effects
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Io
@@ -191,6 +192,16 @@ Item {
                 ColorUtils.mix(Appearance.m3colors.m3secondaryContainer, Appearance.colors.colLayer2, 0.35) : Appearance.colors.colLayer2
             radius: Appearance.rounding.normal
 
+            layer.enabled: true
+            layer.effect: MultiEffect {
+                source: notificationBackground
+                anchors.fill: notificationBackground
+                shadowEnabled: popup
+                shadowColor: Appearance.colors.colShadow
+                shadowVerticalOffset: 1
+                shadowBlur: 0.5
+            }
+
             Behavior on x {
                 enabled: enableAnimation
                 NumberAnimation {
@@ -208,20 +219,6 @@ Item {
                 }
             }
         }
-
-        Loader {
-            active: popup
-            anchors.fill: notificationBackground
-            sourceComponent: DropShadow {
-                id: notificationShadow
-                source: notificationBackground
-                radius: 5
-                samples: radius * 2 + 1
-                color: Appearance.colors.colShadow
-                verticalOffset: 2
-                horizontalOffset: 0
-            }
-        }
     }
 
 

.config/quickshell/modules/notificationPopup/NotificationPopup.qml

@@ -99,7 +99,7 @@ Scope {
             ColumnLayout { // Scrollable window content
                 id: columnLayout
                 anchors.horizontalCenter: parent.horizontalCenter
-                width: parent.width - Appearance.sizes.hyprlandGapsOut * 2
+                width: parent.width - Appearance.sizes.elevationMargin * 2
                 spacing: 0 // The widgets themselves have margins for spacing
 
                 // Notifications are added by the above signal handlers

.config/quickshell/modules/onScreenDisplay/OsdValueIndicator.qml

@@ -3,10 +3,11 @@ import "root:/modules/common"
 import "root:/modules/common/widgets"
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Effects
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Widgets
-import Qt5Compat.GraphicalEffects
+// import Qt5Compat.GraphicalEffects
 
 Item {
     id: root
@@ -31,6 +32,16 @@ Item {
         color: Appearance.colors.colLayer0
         implicitWidth: valueRow.implicitWidth
 
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            source: valueIndicator
+            anchors.fill: valueIndicator
+            shadowEnabled: true
+            shadowColor: Appearance.colors.colShadow
+            shadowVerticalOffset: 1
+            shadowBlur: 0.5
+        }
+
         RowLayout { // Icon on the left, stuff on the right
             id: valueRow
             Layout.margins: 10
@@ -94,15 +105,4 @@ Item {
             }
         }
     }
-
-    DropShadow {
-        id: valueShadow
-        anchors.fill: valueIndicator
-        source: valueIndicator
-        radius: Appearance.sizes.elevationMargin
-        samples: radius * 2 + 1
-        color: Appearance.colors.colShadow
-        verticalOffset: 2
-        horizontalOffset: 0
-    }
 }

.config/quickshell/modules/overview/OverviewWidget.qml

@@ -3,8 +3,8 @@ import "root:/services/"
 import "root:/modules/common"
 import "root:/modules/common/widgets"
 import "root:/modules/common/functions/color_utils.js" as ColorUtils
-import Qt5Compat.GraphicalEffects
 import QtQuick
+import QtQuick.Effects
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Io
@@ -59,6 +59,16 @@ Item {
         color: Appearance.colors.colLayer0
         radius: Appearance.rounding.screenRounding * root.scale + 5 * 2
 
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            source: overviewBackground
+            anchors.fill: overviewBackground
+            shadowEnabled: true
+            shadowColor: Appearance.colors.colShadow
+            shadowVerticalOffset: 1
+            shadowBlur: 0.5
+        }
+
         ColumnLayout {
             id: workspaceColumnLayout
 
@@ -210,15 +220,4 @@ Item {
             }
         }
     }
-
-    DropShadow {
-        z: -9999
-        anchors.fill: overviewBackground
-        horizontalOffset: 0
-        verticalOffset: 2
-        radius: Appearance.sizes.elevationMargin
-        samples: radius * 2 + 1 // Ideally should be 2 * radius + 1, see qt docs
-        color: Appearance.colors.colShadow
-        source: overviewBackground
-    }
 }

.config/quickshell/modules/overview/SearchWidget.qml

@@ -7,6 +7,7 @@ import Qt5Compat.GraphicalEffects
 import Qt.labs.platform
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Effects
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Io
@@ -160,6 +161,15 @@ Item { // Wrapper
         implicitHeight: columnLayout.implicitHeight
         radius: Appearance.rounding.large
         color: Appearance.colors.colLayer0
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            source: searchWidgetContent
+            anchors.fill: searchWidgetContent
+            shadowEnabled: true
+            shadowColor: Appearance.colors.colShadow
+            shadowVerticalOffset: 1
+            shadowBlur: 0.5
+        }
 
         ColumnLayout {
             id: columnLayout
@@ -366,15 +376,4 @@ Item { // Wrapper
             
         }
     }
-
-    DropShadow {
-        id: searchWidgetShadow
-        anchors.fill: searchWidgetContent
-        source: searchWidgetContent
-        radius: Appearance.sizes.elevationMargin
-        samples: radius * 2 + 1
-        color: Appearance.colors.colShadow
-        verticalOffset: 2
-        horizontalOffset: 0
-    }
 }

.config/quickshell/modules/sidebarLeft/SidebarLeft.qml

@@ -5,6 +5,7 @@ import "root:/modules/common/widgets"
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import QtQuick.Effects
 import Qt5Compat.GraphicalEffects
 import Quickshell.Io
 import Quickshell
@@ -80,6 +81,16 @@ Scope { // Scope
                 radius: Appearance.rounding.screenRounding - Appearance.sizes.elevationMargin + 1
                 focus: sidebarRoot.visible
 
+                layer.enabled: true
+                layer.effect: MultiEffect {
+                    source: sidebarLeftBackground
+                    anchors.fill: sidebarLeftBackground
+                    shadowEnabled: true
+                    shadowColor: Appearance.colors.colShadow
+                    shadowVerticalOffset: 1
+                    shadowBlur: 0.5
+                }
+
                 Behavior on width {
                     animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
                 }
@@ -161,17 +172,6 @@ Scope { // Scope
                 }
             }
 
-            // Shadow
-            DropShadow {
-                anchors.fill: sidebarLeftBackground
-                horizontalOffset: 0
-                verticalOffset: 2
-                radius: Appearance.sizes.elevationMargin
-                samples: Appearance.sizes.elevationMargin * 2 + 1 // Ideally should be 2 * radius + 1, see qt docs
-                color: Appearance.colors.colShadow
-                source: sidebarLeftBackground
-            }
-
         }
     }
 

.config/quickshell/modules/sidebarLeft/anime/BooruImage.qml

@@ -8,10 +8,11 @@ import Qt.labs.platform
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import QtQuick.Effects
+import Qt5Compat.GraphicalEffects
 import Quickshell
 import Quickshell.Io
 import Quickshell.Hyprland
-import Qt5Compat.GraphicalEffects
 
 Button {
     id: root
@@ -137,6 +138,16 @@ Button {
                     implicitHeight: contextMenuColumnLayout.implicitHeight + radius * 2
                     implicitWidth: contextMenuColumnLayout.implicitWidth
 
+                    layer.enabled: true
+                    layer.effect: MultiEffect {
+                        source: contextMenu
+                        anchors.fill: contextMenu
+                        shadowEnabled: true
+                        shadowColor: Appearance.colors.colShadow
+                        shadowVerticalOffset: 1
+                        shadowBlur: 0.5
+                    }
+
                     Behavior on opacity {
                         NumberAnimation {
                             duration: Appearance.animation.elementMoveFast.duration
@@ -185,26 +196,6 @@ Button {
                         }
                     }
                 }
-
-                DropShadow {
-                    opacity: root.showActions ? 1 : 0
-                    visible: opacity > 0
-                    anchors.fill: contextMenu
-                    source: contextMenu
-                    radius: Appearance.sizes.elevationMargin
-                    samples: radius * 2 + 1
-                    color: Appearance.colors.colShadow
-                    verticalOffset: 2
-                    horizontalOffset: 0
-
-                    Behavior on opacity {
-                        NumberAnimation {
-                            duration: Appearance.animation.elementMoveFast.duration
-                            easing.type: Appearance.animation.elementMoveFast.type
-                            easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
-                        }
-                    }
-                }
             }
         }
     }

.config/quickshell/modules/sidebarRight/SidebarRight.qml

@@ -7,6 +7,7 @@ import "./quickToggles/"
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import QtQuick.Effects
 import Qt5Compat.GraphicalEffects
 import Quickshell.Io
 import Quickshell
@@ -65,6 +66,16 @@ Scope {
                 color: Appearance.colors.colLayer0
                 radius: Appearance.rounding.screenRounding - Appearance.sizes.elevationMargin + 1
 
+                layer.enabled: true
+                layer.effect: MultiEffect {
+                    source: sidebarRightBackground
+                    anchors.fill: sidebarRightBackground
+                    shadowEnabled: true
+                    shadowColor: Appearance.colors.colShadow
+                    shadowVerticalOffset: 1
+                    shadowBlur: 0.5
+                }
+
                 Keys.onPressed: (event) => {
                     if (event.key === Qt.Key_Escape) {
                         sidebarRoot.hide();
@@ -164,17 +175,6 @@ Scope {
                 }
             }
 
-            // Shadow
-            DropShadow {
-                anchors.fill: sidebarRightBackground
-                horizontalOffset: 0
-                verticalOffset: 2
-                radius: Appearance.sizes.elevationMargin
-                samples: Appearance.sizes.elevationMargin * 2 + 1 // Ideally should be 2 * radius + 1, see qt docs
-                color: Appearance.colors.colShadow
-                source: sidebarRightBackground
-            }
-
         }
     }
 

.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml

@@ -4,8 +4,8 @@ import "root:/services"
 import "root:/modules/common/functions/color_utils.js" as ColorUtils
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Effects
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
 
 Item {
     id: root
@@ -173,25 +173,15 @@ Item {
             Behavior on color {
                 animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
             }
-        }
 
-        DropShadow {
+            layer.enabled: true
-            id: fabShadow
+            layer.effect: MultiEffect {
-            anchors.fill: fabBackground
+                source: fabBackground
-            source: fabBackground
+                anchors.fill: fabBackground
-            horizontalOffset: 0
+                shadowEnabled: true
-            verticalOffset: fabButton.hovered ? 4 : 2
+                shadowColor: Appearance.colors.colShadow
-            radius: fabButton.hovered ? Appearance.sizes.fabHoveredShadowRadius : Appearance.sizes.fabShadowRadius
+                shadowBlur: 0.6
-            samples: fabShadow.radius * 2 + 1
+                shadowVerticalOffset: fabButton.hovered ? 4 : 2
-            color: Appearance.colors.colShadow
-            z: fabBackground.z - 1
-
-            Behavior on verticalOffset {
-                NumberAnimation {
-                    duration: Appearance.animation.elementMoveFast.duration
-                    easing.type: Appearance.animation.elementMoveFast.type
-                    easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
-                }
             }
         }