diff --git a/src/corePlugins.js b/src/corePlugins.js
index e0a232a454a2..bfcc21a4d461 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -26,6 +26,8 @@ export let variantPlugins = {
     addVariant('file', '&::file-selector-button')
 
     addVariant('placeholder', '&::placeholder')
+    
+    addVariant('backdrop', '&::backdrop')
 
     addVariant('before', ({ container }) => {
       container.walkRules((rule) => {
diff --git a/tests/variants.test.css b/tests/variants.test.css
index fe38d4fa81a2..497797a5a980 100644
--- a/tests/variants.test.css
+++ b/tests/variants.test.css
@@ -261,6 +261,12 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.backdrop\:shadow-md::backdrop {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .focus-within\:shadow-md:focus-within {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
diff --git a/tests/variants.test.html b/tests/variants.test.html
index b0b858c1e9ee..3d8324df883e 100644
--- a/tests/variants.test.html
+++ b/tests/variants.test.html
@@ -39,6 +39,7 @@
     <div class="out-of-range:shadow-md"></div>
     <div class="read-only:shadow-md"></div>
     <div class="empty:shadow-md"></div>
+    <dialog class="backdrop:shadow-md"></dialog>
 
     <!-- Pseudo-element variants -->
     <div class="first-letter:text-2xl first-letter:text-red-500"></div>