opacity
Controls the transparency of an element. Use the o prefix followed by a value from 0 to 100. 0 is fully transparent, 100 is fully opaque.
Class List
| Class | CSS | Description |
|---|---|---|
o0 | opacity: 0 | fully transparent (invisible, still takes up space) |
o10 | opacity: 0.1 | 10% opaque |
o20 | opacity: 0.2 | 20% opaque |
o30 | opacity: 0.3 | 30% opaque |
o50 | opacity: 0.5 | 50% opaque (semi-transparent) |
o70 | opacity: 0.7 | 70% opaque |
o80 | opacity: 0.8 | 80% opaque |
o90 | opacity: 0.9 | 90% opaque |
o100 | opacity: 1 | fully opaque (default) |
Visual Comparison
Results of applying different opacity values to the same indigo background box.
o00%o2020%o5050%o8080%o100100%Applied to text
o100Hello Worldo80Hello Worldo50Hello Worldo30Hello Worldo10Hello Worldopacity vs RGBA Alpha
opacity applies transparency to the entire element (including children), while RGBA alpha only applies to that specific color.
opacity: 0.5 — o50
Parent with o50
Child text also becomes transparent
Transparency applied to entire element and all children
RGBA Alpha — bg99-102-241-50
Only background is transparent
Child text remains opaque
Only background color is transparent; child elements are unaffected
| opacity (o50) | RGBA Alpha (bg0-0-0-50) | |
|---|---|---|
| scope | Entire element (including children) | Only that color |
| child impact | All children become transparent too | No effect on children |
| text | Text also becomes transparent | Text stays opaque |
| events | Can receive events even at o0 | N/A |
| transition | Possible (smooth fade) | Possible via color transition |
| primary use cases | Fade effects, disabled indication | Background transparency, overlays |
Hover & Transition Combination
Combine hover-o100 with tall200msease to create a smooth fade effect.
<!-- Fade in effect -->
<div class="o0 hover-o100 tall200msease">
Appears on hover
</div>
<!-- Semi-transparent to opaque -->
<button class="o50 hover-o100 tall200msease bg6366F1 cFFFFFF py12px px2rem br8px bn cp">
Becomes clear on hover
</button>
<!-- Image overlay -->
<div class="pr">
<img src="photo.jpg" class="w100p br8px" />
<div class="pa t0 l0 w100p h100p bg0-0-0-50 o0 hover-o100 tall300msease df jcc aic">
<span class="cFFFFFF fs16px fw600">View Detail</span>
</div>
</div>Preview — try hovering
Code Examples
<!-- Apply default opacity -->
<div class="bg6366F1 cFFFFFF p2rem br8px o50">
50% transparent card
</div>
<!-- Disabled state -->
<button class="bg27272A cA1A1AA py12px px2rem br8px bn o50 pen">
Disabled button
</button>
<!-- Fade in hover effect -->
<div class="o0 hover-o100 tall200msease bg6366F1 cFFFFFF p2rem br8px cp">
Appears on hover
</div>
<!-- Background overlay -->
<div class="pr h30rem bg18181B br8px oh">
<div class="pa t0 l0 w100p h100p bg0-0-0-70 df jcc aic">
<h2 class="cFFFFFF fs2-4rem fw700">Overlay text</h2>
</div>
</div>
<!-- opacity vs dn difference -->
<div class="df gap16px">
<div class="bg6366F1 p16px br8px cFFFFFF o0">o0: Transparent but takes up space</div>
<div class="bg6366F1 p16px br8px cFFFFFF dn">dn: Space also disappears</div>
<div class="bg22C55E p16px br8px cFFFFFF">Next element</div>
</div>Tips & Notes
Opacity is inherited by children
Applying o50 to a parent makes all children 50% transparent as well. To make only a specific color transparent, use the RGBA format (bg0-0-0-50).
o0 still takes up space
o0 makes an element fully transparent but it still occupies space. To remove the space as well, use dn (display: none).
Fade effect pattern
Combine o0 hover-o100 tall200msease to create a smooth fade-in effect on hover.
Value range is 0-100
CSS opacity uses decimals from 0 to 1, but Atomic CSS uses integers from 0 to 100. o50 equals opacity: 0.5.