Background Color

Utilities for controlling an element's background color.

Class Properties
.bg-{color-name} background-color: {color};
.bg-{color-name}-o-{value} background-color: rgba({color}, {opacity});


Control the background color using the .bg-{color-name} utilities.

Background color transparency

Control the background color of an element using the .bg-{color-name}–o-{value} utilities. The settings of the opacities can be changed in _settings.scss


All available colors are defined in _settings.scss.


You can control which variants are generated by modifying the $utility-configuration in _settings.scss.