diff --git a/.changeset/ninety-phones-run.md b/.changeset/ninety-phones-run.md
new file mode 100644
index 0000000000..6d358c7c20
--- /dev/null
+++ b/.changeset/ninety-phones-run.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Adding .color-bg-transparent utility class
diff --git a/docs/content/utilities/colors.mdx b/docs/content/utilities/colors.mdx
index 1c38bac284..a4cb414641 100644
--- a/docs/content/utilities/colors.mdx
+++ b/docs/content/utilities/colors.mdx
@@ -75,6 +75,8 @@ Background colors are most commonly used for filling large blocks of content or
 
 <div class="color-bg-sponsors p-2 rounded mb-2">.color-bg-sponsors</div>
 <div class="color-bg-sponsors-emphasis color-fg-on-emphasis p-2 rounded">.color-bg-sponsors-emphasis</div>
+
+<div class="color-bg-transparent p-2 rounded mb-2">.color-bg-transparent</div>
 ```
 
 ## Border
diff --git a/src/utilities/colors.scss b/src/utilities/colors.scss
index 90e5a2e0bf..9f06ef1e75 100644
--- a/src/utilities/colors.scss
+++ b/src/utilities/colors.scss
@@ -53,6 +53,8 @@
 .color-bg-sponsors          { background-color: var(--color-sponsors-subtle) !important; }
 .color-bg-sponsors-emphasis { background-color: var(--color-sponsors-emphasis) !important; }
 
+.color-bg-transparent { background-color: transparent !important; }
+
 // Border
 
 .color-border-default { border-color: var(--color-border-default) !important; }