Opacity

Opacity utilities for controlling element transparency.

---

Available Classes

Class	CSS
opacity-0	opacity: 0
opacity-5	opacity: 0.05
opacity-10	opacity: 0.1
opacity-15	opacity: 0.15
opacity-20	opacity: 0.2
opacity-25	opacity: 0.25
opacity-50	opacity: 0.5
opacity-75	opacity: 0.75
opacity-85	opacity: 0.85
opacity-90	opacity: 0.9
opacity-100	opacity: 1

<div class="flex gap-2 items-end">
  <div class="bg-primary p-3 rounded-md text-inverse opacity-100">100</div>
  <div class="bg-primary p-3 rounded-md text-inverse opacity-90">90</div>
  <div class="bg-primary p-3 rounded-md text-inverse opacity-75">75</div>
  <div class="bg-primary p-3 rounded-md text-inverse opacity-50">50</div>
  <div class="bg-primary p-3 rounded-md text-inverse opacity-25">25</div>
  <div class="bg-primary p-3 rounded-md text-inverse opacity-10">10</div>
  <div class="bg-primary p-3 rounded-md text-inverse opacity-0">0</div>
</div>

100

90

75

50

25

10

0

---

Responsive Variants

All opacity classes support breakpoint prefixes: sm:, md:, lg:, xl:, 2xl:.

<div class="opacity-50 md:opacity-100">
  Half-transparent on mobile, fully opaque from md up
</div>