Opacity

Utilities for controlling the opacity of an element.

Class	Properties
.o-100	opacity: 1;
.o-98	opacity: 0.98;
.o-95	opacity: 0.95;
.o-90	opacity: 0.9;
.o-85	opacity: 0.85;
.o-80	opacity: 0.8;
.o-75	opacity: 0.75;
.o-70	opacity: 0.7;
.o-65	opacity: 0.65;
.o-60	opacity: 0.6;
.o-55	opacity: 0.55;
.o-50	opacity: 0.5;
.o-45	opacity: 0.45;
.o-40	opacity: 0.4;
.o-35	opacity: 0.35;
.o-30	opacity: 0.3;
.o-25	opacity: 0.25;
.o-20	opacity: 0.2;
.o-15	opacity: 0.15;
.o-10	opacity: 0.1;
.o-5	opacity: 0.05;
.o-0	opacity: 0;

Usage

Set the opacity of an element by using one of the .o-{value} classes.

.o-100

.o-98

.o-95

.o-90

.o-85

.o-80

.o-75

.o-70

.o-65

.o-60

.o-55

.o-50

.o-45

.o-40

.o-35

.o-30

.o-25

.o-20

.o-15

.o-10

.o-5

.o-0

Customization

All opacity values can be adjusted in _settings.scss.

Variants

By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.