Opacity

Controls the opacity of an element.

Class	Property
o-0	opacity: 0.0;
o-10	opacity: 0.1;
o-20	opacity: 0.2;
o-30	opacity: 0.3;
o-40	opacity: 0.4;
o-50	opacity: 0.5;
o-60	opacity: 0.6;
o-70	opacity: 0.7;
o-80	opacity: 0.8;
o-90	opacity: 0.9;
o-100	opacity: 1.0;

100

70

50

20

<div class="d-g g-16 gtc-4">
  <div class="o-100 ai-c bg-indigo d-f dim-16 fw-700 jc-c rad-2 tc-white">100</div>
  <div class="o-70 ai-c bg-indigo d-f dim-16 fw-700 jc-c rad-2 tc-white">70</div>
  <div class="o-50 ai-c bg-indigo d-f dim-16 fw-700 jc-c rad-2 tc-white">50</div>
  <div class="o-20 ai-c bg-indigo d-f dim-16 fw-700 jc-c rad-2 tc-white">20</div>
</div>

---

Using responsive modifiers

Using responsive breakpoints like sm:o-*, md:o-*, lg:o-*, and xxl:o-* allows targeting specific utilities in different viewports.

<div class="o-10 md:o-20 ..."></div>

Using hover modifiers

Using :hover modifiers such as h:o-* allows you to override elements and change their values when hovering over them.

<div class="o-10 h:o-20 ..."></div>