Skip to main content

Opacity setters

Opacity setter classes are practical for any element, you can change the impact an element can have on others by adjusting opacity.

.opacity-0
.opacity-10
.opacity-20
.opacity-30
.opacity-40
.opacity-50
.opacity-60
.opacity-70
.opacity-80
.opacity-90
.opacity-100

Custom helper classes

Note that these classes can be customized in _config.scss file, there is a variable called $OPACITY_LIST, all classes are generated from this list. So it is possible to create customized helper classes for opacity simply!

_config.scss
// This list will be converted to helper classes.
// .opacity-[]
$OPACITY_LIST: (0, 5, 8, 10, 20, 30, 40, 50, 55, 60, 70, 80, 90, 100);