diff --git a/src/utilities/backgrounds.less b/src/utilities/backgrounds.less
index 68f725b62..fefd65116 100644
--- a/src/utilities/backgrounds.less
+++ b/src/utilities/backgrounds.less
@@ -10,6 +10,30 @@
 
 @bg-highlight: hsl(215, 99%, 63%);
 
+.generate-bg-utility(@name; @variant; @color) when (@variant = none) {
+  .bg-@{name} { background-color: @color; }
+}
+
+.generate-bg-utility(@name; @variant; @color) when not (@variant = none) {
+  .bg-@{name}-@{variant} { background-color: @color; }
+}
+
+.generate-backgrounds(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 1) {
+  @variant-name: extract(@color-variants, 1);
+  @variant-color: extract(@color-variants, 2);
+
+  .generate-bg-utility(@color-name; @variant-name; @variant-color);
+}
+
+.generate-backgrounds(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 2) {
+  @variant: extract(@color-variants, @i);
+  @variant-name: extract(@variant, 1);
+  @variant-color: extract(@variant, 2);
+
+  .generate-bg-utility(@color-name; @variant-name; @variant-color);
+  .generate-backgrounds(@color-name; @color-variants; @i + 1);
+}
+
 .bg-light { background-color: @bg-light; }
 .bg-light-soft { background-color: @bg-light-soft; }
 .bg-light-softer { background-color: @bg-light-softer; }