Opacity

Atomic opacity classes allow you to change an element’s opacity quickly.

Classes

Class Output Hover? Focus?
.o0 opacity: 0;
.o5 opacity: 0.05;
.o10 opacity: 0.1;
.o20 opacity: 0.2;
.o30 opacity: 0.3;
.o40 opacity: 0.4;
.o50 opacity: 0.5;
.o60 opacity: 0.6;
.o70 opacity: 0.7;
.o80 opacity: 0.8;
.o90 opacity: 0.9;
.o100 opacity: 1;

Examples

<div class="o0"></div>
<div class="o5"></div>
<div class="o10"></div>
<div class="o20"></div>
<div class="o30"></div>
<div class="o40"></div>
<div class="o50"></div>
<div class="o60"></div>
<div class="o70"></div>
<div class="o80"></div>
<div class="o90"></div>
<div class="o100"></div>
.o0
.o5
.o10
.o20
.o30
.o40
.o50
.o60
.o70
.o80
.o90
.o100