Opacity

Utility	Properties
o-0	opacity: 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;

This example showcases various opacity utilities:

• The o-20 opacity utility sets the opacity to 0.2, making the element 20% visible and 80% transparent.
• The o-50 opacity utility sets the opacity to 0.5, resulting in a 50% visibility and 50% transparency.
• The o-70 opacity utility sets the opacity to 0.7, making the element 70% visible and 30% transparent.
• Finally, the o-100 utility sets the opacity to 1.0, making the element fully opaque and completely visible.

20

50

70

100

<div class="d-g g-16 gtc-1 sm:gtc-4">
  <div class="o-20 ai-c bg-indigo d-f d-18 jc-c rad-1 tc-white">20</div>
  <div class="o-50 ai-c bg-indigo d-f d-18 jc-c rad-1 tc-white">50</div>
  <div class="o-70 ai-c bg-indigo d-f d-18 jc-c rad-1 tc-white">70</div>
  <div class="o-100 ai-c bg-indigo d-f d-18 jc-c rad-1 tc-white">100</div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Media modifier

You can combine 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>

Hover modifier

Alternatively, you can apply :hover by using h:o-* utility to override elements and change their values when hovering over them.

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