diff --git a/README.md b/README.md
index 22f88c1..855ce9c 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,7 @@ It works in a similar way to the tailwind/windicss plugin for heropatterns, it p
 ```
 
 
-### `mask-bg-hero-{patternName}`
+### `bg-mask-hero-{patternName}`
 
 We use [mask-image](https://developer.mozilla.org/en/docs/Web/CSS/mask-image) to display the patterns, so to change the color of the pattern, its opacity, or the background color, you can use the classes you are used to, for example :
 
diff --git a/playground/index.html b/playground/index.html
index b3cc39f..becc426 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -122,16 +122,16 @@ <h3>All patterns (background-image)</h3>
     <div class="p-3 w-50 h-50 bg-hero-yyy-red-500"></div>
     <div class="p-3 w-50 h-50 bg-hero-zig-zag-red-500"></div>
   </div>
-  
+
   <h3>All patterns (mask-background)</h3>
   <div class="grid grid-cols-8 gap-3">
-    <div class="p-3 w-50 h-50 mask-bg-hero-anchors-away bg-red-500"></div>
-    <div class="p-3 w-50 h-50 mask-bg-hero-architect bg-red-500"></div>
-    <div class="p-3 w-50 h-50 mask-bg-hero-autumn bg-red-500"></div>
-    <div class="p-3 w-50 h-50 mask-bg-hero-aztec bg-red-500"></div>
-    <div class="p-3 w-50 h-50 mask-bg-hero-bamboo bg-red-500"></div>
-    <div class="p-3 w-50 h-50 mask-bg-hero-bank-note bg-red-500"></div>
-    <div class="p-3 w-50 h-50 mask-bg-hero-bathroom-floor bg-red-500"></div>
+    <div class="p-3 w-50 h-50 bg-mask-hero-anchors-away bg-red-500"></div>
+    <div class="p-3 w-50 h-50 bg-mask-hero-architect bg-red-500"></div>
+    <div class="p-3 w-50 h-50 bg-mask-hero-autumn bg-red-500"></div>
+    <div class="p-3 w-50 h-50 bg-mask-hero-aztec bg-red-500"></div>
+    <div class="p-3 w-50 h-50 bg-mask-hero-bamboo bg-red-500"></div>
+    <div class="p-3 w-50 h-50 bg-mask-hero-bank-note bg-red-500"></div>
+    <div class="p-3 w-50 h-50 bg-mask-hero-bathroom-floor bg-red-500"></div>
     <div class="p-3 w-50 h-50 mask-bg-hero-bevel-circle bg-red-500"></div>
     <div class="p-3 w-50 h-50 mask-bg-hero-boxes bg-red-500"></div>
     <div class="p-3 w-50 h-50 mask-bg-hero-brick-wall bg-red-500"></div>
diff --git a/src/index.ts b/src/index.ts
index 433afd1..b29111d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,7 +6,7 @@ import type { Preset } from 'unocss'
 const availablePatterns = Object.keys(patterns)
 const availablePatternsGroup = `(${availablePatterns.sort().reverse().join('|')})`
 const bgHeroRegex = new RegExp(`^bg-hero-${availablePatternsGroup}-(.*)$`)
-const bgMaskHeroRegex = new RegExp(`^mask-bg-hero-${availablePatternsGroup}$`)
+const bgMaskHeroRegex = new RegExp(`^(mask-bg-hero-|bg-mask-hero-)${availablePatternsGroup}$`)
 
 function getBgImage(pattern: string, rgb = '0,0,0', alpha = '1') {
   return pattern.replace('FILLCOLOR', `rgb(${rgb})`).replace('FILLOPACITY', alpha)
@@ -34,7 +34,7 @@ export function presetHeroPatterns(): Preset {
       ],
       [
         bgMaskHeroRegex,
-        ([, name]) => {
+        ([, , name]) => {
           const pattern = patterns[name || '']
           if (pattern) {
             return {