Skip to main content


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

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;
<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>
Deploys by Netlify