Sections

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

Section titled 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