diff --git a/_sass/helpers.scss b/_sass/helpers.scss
index 60461eb..dad1aae 100644
--- a/_sass/helpers.scss
+++ b/_sass/helpers.scss
@@ -142,6 +142,7 @@
 // anchos y altos
 @each $prop, $abbrev in (width: w, height: h) {
   @each $size, $length in $sizes {
+    .#{$abbrev}-#{$size} { #{$prop}: $length; }
     .#{$abbrev}-#{$size} { #{$prop}: $length; }
     .min-#{$abbrev}-#{$size} { min-#{$prop}: $length; }
     .max-#{$abbrev}-#{$size} { max-#{$prop}: $length; }
@@ -214,7 +215,7 @@
 }
 
 // Colores
-@each $color, $_ in $colors {
+@each $color, $rgb in $colors {
   .background-#{$color} {
     background-color: var(--#{$color});
 
@@ -223,6 +224,12 @@
     }
   }
 
+  @each $opacity, $degree in $opacities {
+    .background-#{$color}-t#{$opacity} {
+      background-color: scale-color($rgb, $alpha: $degree);
+    }
+  }
+
   @each $attr in (stroke, fill) {
     .#{$attr}-#{$color} {
       svg {
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 59a2109..80b66d5 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -6,6 +6,15 @@ $debug: {{ jekyll.environment | not: 'production' }};
 $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
 $bezier: cubic-bezier(0.75, 0, 0.25, 1);
 
+$opacities: (
+  0: -100%,
+  1: -80%,
+  2: -60%,
+  3: -40%,
+  4: -20%,
+  5: 0%
+);
+
 /*
  * Redefinir variables de Boostrap acá.  Se las puede ver en
  * node_modules/bootstrap/scss/_variables.scss