over- and undershooting now pretty

.config/gtk-3.0/effects/overshoot.css

@@ -3,19 +3,48 @@
  * and dotted lines when end of list is not reached
  */
 
+/* -gtk-gradient(radial start_x, start_y, start_radius, end_x end_y, end_radius, color-stop (position, color), ...) */
 overshoot.top,
 overshoot.bottom,
 overshoot.left,
 overshoot.right {
     background: transparent;
+    background-repeat: no-repeat;
     border: none;
+    box-shadow: none;
 }
 
-undershoot.top.
+overshoot.top {
+    background-image: -gtk-gradient(radial, center top, 0, center top, 0.6, from(alpha(@acc1_color, 0.6)), to(transparent));
+    background-size: 100% 60%;
+    background-position: center top;
+}
+
+overshoot.bottom {
+    background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(alpha(@acc1_color, 0.6)), to(transparent));
+    background-size: 100% 60%;
+    background-position: center bottom;
+}
+
+overshoot.left {
+    background-image: -gtk-gradient(radial, left center, 0, left center, 0.6, from(alpha(@acc1_color, 0.6)), to(transparent));
+    background-size: 60% 100%;
+    background-position: left center;
+}
+
+overshoot.right {
+    background-image: -gtk-gradient(radial, right center, 0, right center, 0.6, from(alpha(@acc1_color, 0.6)), to(transparent));
+    background-size: 60% 100%;
+    background-position: right center;
+}
+
+undershoot.top,
 undershoot.bottom,
 undershoot.left,
 undershoot.right {
     background: transparent;
+    background-origin: content-box;
     border: none;
+    box-shadow: none;
 }