diff --git a/assets/css/global.css b/assets/css/global.css
index c81271073c..18b44137cc 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -36,33 +36,36 @@
     @apply underline decoration-blue-light decoration-4 underline-offset-4 dark:decoration-blue-dark;
   }
 
-  .bg-pattern-blue-light {
-    background: linear-gradient(to right, theme(colors.white / 50%), theme(colors.white / 70%)), url('/assets/images/bg-pattern-blue.webp');
-    @apply bg-no-repeat bg-cover;
+  .bg-pattern-blue {
+    background-color: theme(colors.white / 50%);
+    background-image: url('/assets/images/bg-pattern-blue.webp');
+    background-blend-mode: overlay;
+    background-size: cover;
+    background-repeat: none;
+    .dark & {
+      background-color: theme(colors.black / 70%);
+    }
   }
 
-  .bg-pattern-purple-light {
-    background: linear-gradient(to right, theme(colors.white / 50%), theme(colors.white / 70%)), url('/assets/images/bg-pattern-purple.webp');
-    @apply bg-no-repeat bg-cover;
+  .bg-pattern-purple {
+    background-color: theme(colors.white / 50%);
+    background-image: url('/assets/images/bg-pattern-purple.webp');
+    background-blend-mode: overlay;
+    background-size: cover;
+    background-repeat: none;
+    .dark & {
+      background-color: theme(colors.black / 70%);
+    }
   }
 
-  .bg-pattern-verde-light {
-    background: linear-gradient(to right, theme(colors.white / 50%), theme(colors.white / 70%)), url('/assets/images/bg-pattern-verde.webp');
-    @apply bg-no-repeat bg-cover;
-  }
-
-  .bg-pattern-blue-dark {
-    background: linear-gradient(to right, theme(colors.black / 70%), theme(colors.black / 70%)), url('/assets/images/bg-pattern-blue.webp');
-    @apply bg-no-repeat bg-cover;
-  }
-
-  .bg-pattern-purple-dark {
-    background: linear-gradient(to right, theme(colors.black / 70%), theme(colors.black / 70%)), url('/assets/images/bg-pattern-purple.webp');
-    @apply bg-no-repeat bg-cover;
-  }
-
-  .bg-pattern-verde-dark {
-    background: linear-gradient(to right, theme(colors.black / 70%), theme(colors.black / 70%)), url('/assets/images/bg-pattern-verde.webp');
-    @apply bg-no-repeat bg-cover;
+  .bg-pattern-verde {
+    background-color: theme(colors.white / 50%);
+    background-image: url('/assets/images/bg-pattern-verde.webp');
+    background-blend-mode: overlay;
+    background-size: cover;
+    background-repeat: none;
+    .dark & {
+      background-color: theme(colors.black / 70%);
+    }
   }
 }
diff --git a/layouts/index.html b/layouts/index.html
index f8b2408692..51608c184f 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -17,7 +17,7 @@
   {{ partial "header.html" . }}
   <main class="flex min-h-screen w-full flex-col items-stretch self-center">
     <div class="flex w-[1200px] flex-col items-stretch gap-20 self-center py-20 lg:w-full lg:px-4">
-      <div class="bg-pattern-blue-light dark:bg-pattern-blue-dark relative overflow-hidden rounded drop-shadow">
+      <div class="bg-pattern-blue relative overflow-hidden rounded drop-shadow">
         <div class="flex h-full flex-col items-start justify-between gap-4 p-8">
           <div class="flex items-center gap-6">
             <span class="icon-svg text-violet-light dark:text-violet-dark">
@@ -110,7 +110,7 @@
       </div>
 
       <div class="z-10 grid grid-cols-2 gap-20 md:grid-cols-1">
-        <div class="bg-pattern-verde-light dark:bg-pattern-verde-dark relative rounded p-6 drop-shadow">
+        <div class="bg-pattern-verde relative rounded p-6 drop-shadow">
           <div class="flex h-full flex-col items-start justify-between gap-12">
             <div class="flex flex-col gap-4">
               <h2 class="font-medium">Getting started</h2>
@@ -132,7 +132,7 @@
           </div>
         </div>
         <div class="rounded-[6px] bg-gradient-to-br from-blue-light-400 to-magenta-light-400 dark:from-blue-dark-400 dark:to-magenta-dark-400 p-[2px] drop-shadow">
-          <div class="bg-pattern-purple-light dark:bg-pattern-purple-dark rounded p-6">
+          <div class="bg-pattern-purple rounded p-6">
             <div class="flex flex-col gap-12">
               <div class="flex flex-col gap-4">
                 <h2 class="font-medium">Featured</h2>