adding some gradient border CSS

src/resources/css/utilities.css

@@ -1,3 +1,30 @@
 .button-row {
     @apply inline-grid grid-flow-col auto-cols-max items-center; /* intentionally leaving gap out so that it can be set on per-case basis */
 }
+
+    .gradBorder i {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  border-radius: 30px;
+  padding: 1.5px; /* the thickness of the border */
+  /* the below will do the magic */
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    /* this will cover only the content area (no padding) */
+      linear-gradient(#fff 0 0); /* this will cover all the area */
+  -webkit-mask-composite: xor; /* needed for old browsers until the below is more supported */
+  mask-composite: exclude; /* this will exclude the first layer from the second so only the padding area will be kept visible */
+}
+
+.gradBorder i::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg, #ffffff73 0%, #ffffff10 50%);
+  transition: transform 0.7s linear;
+}