Background

Back ground of any elements can have easily changed color or alpha opacity by adding its corresponding classes. The color palette is taken from material design colors.

Background color

red-bg lighter-5
red-bg lighter-4
red-bg lighter-3
red-bg lighter-2
red-bg lighter-1
red-bg
red-bg darker-1
red-bg darker-2
red-bg darker-3
red-bg darker-4
red-bg alt-1
red-bg alt-2
red-bg alt-3
red-bg alt-4

<div id="graph1"></div>
				
pink-bg lighter-5
pink-bg lighter-4
pink-bg lighter-3
pink-bg lighter-2
pink-bg lighter-1
pink-bg
pink-bg darker-1
pink-bg darker-2
pink-bg darker-3
pink-bg darker-4
pink-bg alt-1
pink-bg alt-2
pink-bg alt-3
pink-bg alt-4

<div id="graph1"></div>
				
purple-bg lighter-5
purple-bg lighter-4
purple-bg lighter-3
purple-bg lighter-2
purple-bg lighter-1
purple-bg
purple-bg darker-1
purple-bg darker-2
purple-bg darker-3
purple-bg darker-4
purple-bg alt-1
purple-bg alt-2
purple-bg alt-3
purple-bg alt-4

<div id="graph1"></div>
				
deep-purple-bg lighter-5
deep-purple-bg lighter-4
deep-purple-bg lighter-3
deep-purple-bg lighter-2
deep-purple-bg lighter-1
deep-purple-bg
deep-purple-bg darker-1
deep-purple-bg darker-2
deep-purple-bg darker-3
deep-purple-bg darker-4
deep-purple-bg alt-1
deep-purple-bg alt-2
deep-purple-bg alt-3
deep-purple-bg alt-4

<div id="graph1"></div>
				
indigo-bg lighter-5
indigo-bg lighter-4
indigo-bg lighter-3
indigo-bg lighter-2
indigo-bg lighter-1
indigo-bg
indigo-bg darker-1
indigo-bg darker-2
indigo-bg darker-3
indigo-bg darker-4
indigo-bg alt-1
indigo-bg alt-2
indigo-bg alt-3
indigo-bg alt-4

<div id="graph1"></div>
				
blue-bg lighter-5
blue-bg lighter-4
blue-bg lighter-3
blue-bg lighter-2
blue-bg lighter-1
blue-bg
blue-bg darker-1
blue-bg darker-2
blue-bg darker-3
blue-bg darker-4
blue-bg alt-1
blue-bg alt-2
blue-bg alt-3
blue-bg alt-4

<div id="graph1"></div>
				
light-blue-bg lighter-5
light-blue-bg lighter-4
light-blue-bg lighter-3
light-blue-bg lighter-2
light-blue-bg lighter-1
light-blue-bg
light-blue-bg darker-1
light-blue-bg darker-2
light-blue-bg darker-3
light-blue-bg darker-4
light-blue-bg alt-1
light-blue-bg alt-2
light-blue-bg alt-3
light-blue-bg alt-4

<div id="graph1"></div>
				
cyan-bg lighter-5
cyan-bg lighter-4
cyan-bg lighter-3
cyan-bg lighter-2
cyan-bg lighter-1
cyan-bg
cyan-bg darker-1
cyan-bg darker-2
cyan-bg darker-3
cyan-bg darker-4
cyan-bg alt-1
cyan-bg alt-2
cyan-bg alt-3
cyan-bg alt-4

<div id="graph1"></div>
				
teal-bg lighter-5
teal-bg lighter-4
teal-bg lighter-3
teal-bg lighter-2
teal-bg lighter-1
teal-bg
teal-bg darker-1
teal-bg darker-2
teal-bg darker-3
teal-bg darker-4
teal-bg alt-1
teal-bg alt-2
teal-bg alt-3
teal-bg alt-4

<div id="graph1"></div>
				
green-bg lighter-5
green-bg lighter-4
green-bg lighter-3
green-bg lighter-2
green-bg lighter-1
green-bg
green-bg darker-1
green-bg darker-2
green-bg darker-3
green-bg darker-4
green-bg alt-1
green-bg alt-2
green-bg alt-3
green-bg alt-4

<div id="graph1"></div>
				
light-green-bg lighter-5
light-green-bg lighter-4
light-green-bg lighter-3
light-green-bg lighter-2
light-green-bg lighter-1
light-green-bg
light-green-bg darker-1
light-green-bg darker-2
light-green-bg darker-3
light-green-bg darker-4
light-green-bg alt-1
light-green-bg alt-2
light-green-bg alt-3
light-green-bg alt-4

<div id="graph1"></div>
				
lime-bg lighter-5
lime-bg lighter-4
lime-bg lighter-3
lime-bg lighter-2
lime-bg lighter-1
lime-bg
lime-bg darker-1
lime-bg darker-2
lime-bg darker-3
lime-bg darker-4
lime-bg alt-1
lime-bg alt-2
lime-bg alt-3
lime-bg alt-4

<div id="graph1"></div>
				
yellow-bg lighter-5
yellow-bg lighter-4
yellow-bg lighter-3
yellow-bg lighter-2
yellow-bg lighter-1
yellow-bg
yellow-bg darker-1
yellow-bg darker-2
yellow-bg darker-3
yellow-bg darker-4
yellow-bg alt-1
yellow-bg alt-2
yellow-bg alt-3
yellow-bg alt-4

<div id="graph1"></div>
				
amber-bg lighter-5
amber-bg lighter-4
amber-bg lighter-3
amber-bg lighter-2
amber-bg lighter-1
amber-bg
amber-bg darker-1
amber-bg darker-2
amber-bg darker-3
amber-bg darker-4
amber-bg alt-1
amber-bg alt-2
amber-bg alt-3
amber-bg alt-4

<div id="graph1"></div>
				
orange-bg lighter-5
orange-bg lighter-4
orange-bg lighter-3
orange-bg lighter-2
orange-bg lighter-1
orange-bg
orange-bg darker-1
orange-bg darker-2
orange-bg darker-3
orange-bg darker-4
orange-bg alt-1
orange-bg alt-2
orange-bg alt-3
orange-bg alt-4

<div id="graph1"></div>
				
deep-orange-bg lighter-5
deep-orange-bg lighter-4
deep-orange-bg lighter-3
deep-orange-bg lighter-2
deep-orange-bg lighter-1
deep-orange-bg
deep-orange-bg darker-1
deep-orange-bg darker-2
deep-orange-bg darker-3
deep-orange-bg darker-4
deep-orange-bg alt-1
deep-orange-bg alt-2
deep-orange-bg alt-3
deep-orange-bg alt-4

<div id="graph1"></div>
				
brown-bg lighter-5
brown-bg lighter-4
brown-bg lighter-3
brown-bg lighter-2
brown-bg lighter-1
brown-bg
brown-bg darker-1
brown-bg darker-2
brown-bg darker-3
brown-bg darker-4

<div id="graph1"></div>
				
grey-bg lighter-5
grey-bg lighter-4
grey-bg lighter-3
grey-bg lighter-2
grey-bg lighter-1
grey-bg
grey-bg darker-1
grey-bg darker-2
grey-bg darker-3
grey-bg darker-4

<div id="graph1"></div>
				
blue-grey-bg lighter-5
blue-grey-bg lighter-4
blue-grey-bg lighter-3
blue-grey-bg lighter-2
blue-grey-bg lighter-1
blue-grey-bg
blue-grey-bg darker-1
blue-grey-bg darker-2
blue-grey-bg darker-3
blue-grey-bg darker-4

<div id="graph1"></div>
				
black-bg
white-bg
transparent-bg

<div id="graph1"></div>
				

Background alpha opacity

.bg-alpha-8
.bg-alpha-6
.bg-alpha-4
.bg-alpha-2

<div id="graph1"></div>