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;


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



All opacity values can be adjusted in _settings.scss.


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.