Opacity

Controls the opacity of an element.

Class	Properties
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-6	opacity: 0.6;
o-70	opacity: 0.7;
o-80	opacity: 0.8;
o-90	opacity: 0.9;
o-100	opacity: 1;

<div class="d-g g-16 gtc-4">
    <div class="bg-cyan o-20 dim-16 fw-700 ins rad-2 tc-white">20</div>
    <div class="bg-cyan o-50 dim-16 fw-700 ins rad-2 tc-white">50</div>
    <div class="bg-cyan o-70 dim-16 fw-700 ins rad-2 tc-white">70</div>
    <div class="bg-cyan o-100 dim-16 fw-700 ins rad-2 tc-white">100</div>
</div>

---

Using breakpoints

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 variants

Using :hover variants 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>