diff --git a/assets/components/atoms/link/link-bg-variants.twig b/assets/components/atoms/link/link-bg-variants.twig
new file mode 100644
index 00000000..72f06059
--- /dev/null
+++ b/assets/components/atoms/link/link-bg-variants.twig
@@ -0,0 +1,5 @@
+<p><strong class="pr-3">Dark:</strong> <span class="p-3 d-inline-block bg-dark"><a href="#">Teaching & PhD</a></span></p>
+<p><strong class="pr-3">Danger:</strong> <span class="p-3 d-inline-block bg-danger"><a href="#">Teaching & PhD</a></span></p>
+<p><strong class="pr-3">Success:</strong> <span class="p-3 d-inline-block bg-success"><a href="#">Teaching & PhD</a></span></p>
+<p><strong class="pr-3">Info:</strong> <span class="p-3 d-inline-block bg-info"><a href="#">Teaching & PhD</a></span></p>
+<p><strong class="pr-3">Warning:</strong> <span class="p-3 d-inline-block bg-warning"><a href="#">Teaching & PhD</a></span></p>
diff --git a/assets/components/atoms/link/link.scss b/assets/components/atoms/link/link.scss
index f4f126e9..ccc8702f 100644
--- a/assets/components/atoms/link/link.scss
+++ b/assets/components/atoms/link/link.scss
@@ -23,6 +23,27 @@ a {
       text-decoration-color: $body-color;
     }
   }
+
+  .text-white &,
+  &.text-white {
+    text-decoration-color: currentcolor;
+
+    @include hover-focus-active {
+      text-decoration-color: transparent;
+    }
+  }
+
+  // add styles for background color variants
+  @each $color, $value in $theme-colors {
+    .bg-#{$color} & {
+      color: color-yiq($value);
+      text-decoration-color: currentcolor;
+
+      @include hover-focus-active {
+        text-decoration-color: transparent;
+      }
+    }
+  }
 }
 
 a,
@@ -39,9 +60,6 @@ a:active {
   @include text-emphasis-variant-decoration(".text-#{$color}", $value);
 }
 
-// Special case for white links.
-@include text-emphasis-variant-decoration(".text-white", $white);
-
 // The link pretty allows you to have more cross-browser friendly link styles and the fancy focus box.
 // Removed in July 2023, text-decoration color is now well supported by all major broswers: https://caniuse.com/mdn-css_properties_text-decoration-color
 /*
diff --git a/assets/components/atoms/link/link.twig b/assets/components/atoms/link/link.twig
index 8b53e88d..002f08f5 100644
--- a/assets/components/atoms/link/link.twig
+++ b/assets/components/atoms/link/link.twig
@@ -1,2 +1,3 @@
 <p><strong class="pr-3">Regular link:</strong> <a href="#">Teaching & PhD</a></p>
-<p class="mt-4"><strong class="pr-3">Dark link:</strong> <span class="p-3 bg-dark"><a class="text-white" href="#">Teaching & PhD</a></span></p>
+<p><strong class="pr-3">Light background:</strong> <span class="p-3 d-inline-block bg-gray-100"><a href="#">Teaching & PhD</a></span></p>
+<p><strong class="pr-3">Dark background:</strong> <span class="p-3 d-inline-block bg-gray-600"><a class="text-white" href="#">Teaching & PhD</a></span></p>
diff --git a/assets/components/atoms/link/link.yml b/assets/components/atoms/link/link.yml
index 43996c38..55f486ca 100644
--- a/assets/components/atoms/link/link.yml
+++ b/assets/components/atoms/link/link.yml
@@ -15,6 +15,9 @@ notes: >
   The `link-collapse` class sets the link to have a red triangle and special
   styles.
 variants:
+  - name: bg-variants
+    title: Background variants
+    notes:
   - name: icon
     title: Icon
     notes: |