diff --git a/.config/quickshell/modules/common/widgets/PrimaryTabButton.qml b/.config/quickshell/modules/common/widgets/PrimaryTabButton.qml
index e59c8a96..b7c62871 100644
--- a/.config/quickshell/modules/common/widgets/PrimaryTabButton.qml
+++ b/.config/quickshell/modules/common/widgets/PrimaryTabButton.qml
@@ -110,13 +110,28 @@ TabButton {
             animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
         }
 
-        Rectangle {
+        Item {
             id: ripple
-
-            radius: Appearance?.rounding.full ?? 9999
-            color: button.colRipple
+            width: ripple.implicitWidth
+            height: ripple.implicitHeight
             opacity: 0
 
+            property real implicitWidth: 0
+            property real implicitHeight: 0
+
+            Behavior on opacity {
+                animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
+            }
+
+            RadialGradient {
+                anchors.fill: parent
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: button.colRipple }
+                    GradientStop { position: 0.3; color: button.colRipple }
+                    GradientStop { position: 0.5 ; color: Qt.rgba(button.colRipple.r, button.colRipple.g, button.colRipple.b, 0) }
+                }
+            }
+
             transform: Translate {
                 x: -ripple.width / 2
                 y: -ripple.height / 2
diff --git a/.config/quickshell/modules/common/widgets/RippleButton.qml b/.config/quickshell/modules/common/widgets/RippleButton.qml
index 0a3a8743..cd7762b9 100644
--- a/.config/quickshell/modules/common/widgets/RippleButton.qml
+++ b/.config/quickshell/modules/common/widgets/RippleButton.qml
@@ -150,16 +150,28 @@ Button {
             }
         }
 
-        Rectangle {
+        Item {
             id: ripple
-
-            radius: Appearance?.rounding.full ?? 9999
+            width: ripple.implicitWidth
+            height: ripple.implicitHeight
             opacity: 0
-            color: root.rippleColor
-            Behavior on color {
+
+            property real implicitWidth: 0
+            property real implicitHeight: 0
+
+            Behavior on opacity {
                 animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
             }
 
+            RadialGradient {
+                anchors.fill: parent
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: root.rippleColor }
+                    GradientStop { position: 0.3; color: root.rippleColor }
+                    GradientStop { position: 0.5; color: Qt.rgba(root.rippleColor.r, root.rippleColor.g, root.rippleColor.b, 0) }
+                }
+            }
+
             transform: Translate {
                 x: -ripple.width / 2
                 y: -ripple.height / 2