diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index 92f57d1..9d871f2 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -19,7 +19,7 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
   });
 
   return (
-    <div className="p-5 bg-gradient-to-tr from-sky-100 self-stretch to-gray-100 min-h-[12rem] rounded-md cursor-pointer shadow duration-100 hover:shadow-none group">
+    <div className="p-5 bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% self-stretch min-h-[12rem] rounded-md cursor-pointer shadow duration-100 hover:shadow-none group">
       <Link href={`/collections/${collection.id}`}>
         <div className="flex flex-col gap-2 justify-between h-full">
           <div>
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index ebd5adf..e2960cf 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -194,7 +194,7 @@ export default function () {
           })}
 
           <div
-            className="p-5 bg-gradient-to-tr from-sky-100 self-stretch to-gray-100 min-h-[12rem] rounded-md cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
+            className="p-5 self-stretch bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% min-h-[12rem] rounded-md cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
             onClick={toggleCollectionModal}
           >
             <p className="text-sky-900 group-hover:opacity-0 duration-100">