Background Colors

Use this suite of background color utilities to directly style elements. The color values used in this module are from mrmrs/colors.

Background Colors

.bg-black

.bg-gray

.bg-silver

.bg-white

.bg-aqua

.bg-blue

.bg-navy

.bg-teal

.bg-green

.bg-olive

.bg-lime

.bg-yellow

.bg-orange

.bg-red

.bg-fuchsia

.bg-purple

.bg-maroon

.bg-darken-1

.bg-darken-2

.bg-darken-3

.bg-darken-4

.bg-lighten-1

.bg-lighten-2

.bg-lighten-3

.bg-lighten-4

<div class="center p1 white bg-black">.bg-black</div>
<div class="center p1 bg-gray">.bg-gray</div>
<div class="center p1 bg-silver">.bg-silver</div>
<div class="center p1 bg-white">.bg-white</div>
<div class="center p1 bg-aqua">.bg-aqua</div>
<div class="center p1 bg-blue">.bg-blue</div>
<div class="center p1 white bg-navy">.bg-navy</div>
<div class="center p1 bg-teal">.bg-teal</div>
<div class="center p1 bg-green">.bg-green</div>
<div class="center p1 bg-olive">.bg-olive</div>
<div class="center p1 bg-lime">.bg-lime</div>
<div class="center p1 bg-yellow">.bg-yellow</div>
<div class="center p1 bg-orange">.bg-orange</div>
<div class="center p1 bg-red">.bg-red</div>
<div class="center p1 bg-fuchsia">.bg-fuchsia</div>
<div class="center p1 bg-purple">.bg-purple</div>
<div class="center p1 white bg-maroon">.bg-maroon</div>
<div class="center p1 bg-darken-1">.bg-darken-1</div>
<div class="center p1 bg-darken-2">.bg-darken-2</div>
<div class="center p1 bg-darken-3">.bg-darken-3</div>
<div class="center p1 bg-darken-4">.bg-darken-4</div>
<div class="bg-black">
  <div class="center p1 white bg-lighten-1">.bg-lighten-1</div>
  <div class="center p1 white bg-lighten-2">.bg-lighten-2</div>
  <div class="center p1 white bg-lighten-3">.bg-lighten-3</div>
  <div class="center p1 white bg-lighten-4">.bg-lighten-4</div>
</div>

CSS Source

.bg-black  { background-color: var(--black) }
.bg-gray   { background-color: var(--gray) }
.bg-silver { background-color: var(--silver) }
.bg-white  { background-color: var(--white) }

.bg-aqua  { background-color: var(--aqua) }
.bg-blue  { background-color: var(--blue) }
.bg-navy  { background-color: var(--navy) }
.bg-teal  { background-color: var(--teal) }
.bg-green { background-color: var(--green) }
.bg-olive { background-color: var(--olive) }
.bg-lime  { background-color: var(--lime) }

.bg-yellow  { background-color: var(--yellow) }
.bg-orange  { background-color: var(--orange) }
.bg-red     { background-color: var(--red) }
.bg-fuchsia { background-color: var(--fuchsia) }
.bg-purple  { background-color: var(--purple) }
.bg-maroon  { background-color: var(--maroon) }

.bg-darken-1 { background-color: var(--darken-1) }
.bg-darken-2 { background-color: var(--darken-2) }
.bg-darken-3 { background-color: var(--darken-3) }
.bg-darken-4 { background-color: var(--darken-4) }

.bg-lighten-1 { background-color: var(--lighten-1) }
.bg-lighten-2 { background-color: var(--lighten-2) }
.bg-lighten-3 { background-color: var(--lighten-3) }
.bg-lighten-4 { background-color: var(--lighten-4) }

27 Rules

27 Selectors

80 Declarations

56 Properties

Colors

Guides