diff --git a/addons/web/static/src/legacy/scss/ui.scss b/addons/web/static/src/legacy/scss/ui.scss
index 4aad2bb0d0e..a0f8dff896d 100644
--- a/addons/web/static/src/legacy/scss/ui.scss
+++ b/addons/web/static/src/legacy/scss/ui.scss
@@ -28,6 +28,19 @@
     }
 }
 
+// == Opacity Utility Classes
+//
+// TODO: generate these classes with BTS5's API.
+@each $-opacity-level in (0, 25, 50, 75, 100) {
+    .opacity-#{$-opacity-level} {
+        opacity: $-opacity-level * 1%;
+    }
+
+    .opacity-#{$-opacity-level}-hover:hover {
+        opacity: $-opacity-level * 1%;
+    }
+}
+
 // Allow to change data-toggle="collapse" text according to status
 :not(.collapsed) > .o-collapsed-label,
 .collapsed > .o-not-collapsed-label {