Background

background color

For background-color: color use shorthand class .bg-{color-name}

 .bg-blue-darkest
.bg-blue-darker
.bg-blue-dark
.bg-blue
.bg-blue-light
.bg-blue-lighter
.bg-blue-lightest
.bg-indigo-darkest
.bg-indigo-darker
.bg-indigo-dark
.bg-indigo
.bg-indigo-light
.bg-indigo-lighter
.bg-indigo-lightest
.bg-purple-darkest
.bg-purple-darker
.bg-purple-dark
.bg-purple
.bg-purple-light
.bg-purple-lighter
.bg-purple-lightest
.bg-pink-darkest
.bg-pink-darker
.bg-pink-dark
.bg-pink
.bg-pink-light
.bg-pink-lighter
.bg-pink-lightest
.bg-red-darkest
.bg-red-darker
.bg-red-dark
.bg-red
.bg-red-light
.bg-red-lighter
.bg-red-lightest
.bg-orange-darkest
.bg-orange-darker
.bg-orange-dark
.bg-orange
.bg-orange-light
.bg-orange-lighter
.bg-orange-lightest
.bg-yellow-darkest
.bg-yellow-darker
.bg-yellow-dark
.bg-yellow
.bg-yellow-light
.bg-yellow-lighter
.bg-yellow-lightest
.bg-pear-darkest
.bg-pear-darker
.bg-pear-dark
.bg-pear
.bg-pear-light
.bg-pear-lighter
.bg-pear-lightest
.bg-green-darkest
.bg-green-darker
.bg-green-dark
.bg-green
.bg-green-light
.bg-green-lighter
.bg-green-lightest
.bg-mint-darkest
.bg-mint-darker
.bg-mint-dark
.bg-mint
.bg-mint-light
.bg-mint-lighter
.bg-mint-lightest
.bg-teal-darkest
.bg-teal-darker
.bg-teal-dark
.bg-teal
.bg-teal-light
.bg-teal-lighter
.bg-teal-lightest
.bg-gray-darkest
.bg-gray-darker
.bg-gray-dark
.bg-gray
.bg-gray-light
.bg-gray-lighter
.bg-gray-lightest
.bg-slategray-darkest
.bg-slategray-darker
.bg-slategray-dark
.bg-slategray
.bg-slategray-light
.bg-slategray-lighter
.bg-slategray-lightest
.bg-brown-darkest
.bg-brown-darker
.bg-brown-dark
.bg-brown
.bg-brown-light
.bg-brown-lighter
.bg-brown-lightest
.bg-wine-darkest
.bg-wine-darker
.bg-wine-dark
.bg-wine
.bg-wine-light
.bg-wine-lighter
.bg-wine-lightest
.bg-almond-darkest
.bg-almond-darker
.bg-almond-dark
.bg-almond
.bg-almond-light
.bg-almond-lighter
.bg-almond-lightest

Gradient Background (two color)

Background gradient is combination of two colors, simply choose any two colors to make gradient background color .{first-color}-{second-color}

.blue-indigo
.blue-purple
.blue-pink
.blue-red
.blue-orange
.blue-yellow
.blue-pear
.blue-green
.blue-mint
.blue-teal
.blue-gray
.blue-slategray
.blue-brown
.blue-wine
.blue-almond
.indigo-blue
.indigo-purple
.indigo-pink
.indigo-red
.indigo-orange
.indigo-yellow
.indigo-pear
.indigo-green
.indigo-mint
.indigo-teal
.indigo-gray
.indigo-slategray
.indigo-brown
.indigo-wine
.indigo-almond
.purple-blue
.purple-indigo
.purple-pink
.purple-red
.purple-orange
.purple-yellow
.purple-pear
.purple-green
.purple-mint
.purple-teal
.purple-gray
.purple-slategray
.purple-brown
.purple-wine
.purple-almond
.pink-blue
.pink-indigo
.pink-purple
.pink-red
.pink-orange
.pink-yellow
.pink-pear
.pink-green
.pink-mint
.pink-teal
.pink-gray
.pink-slategray
.pink-brown
.pink-wine
.pink-almond
.red-blue
.red-indigo
.red-purple
.red-pink
.red-orange
.red-yellow
.red-pear
.red-green
.red-mint
.red-teal
.red-gray
.red-slategray
.red-brown
.red-wine
.red-almond
.orange-blue
.orange-indigo
.orange-purple
.orange-pink
.orange-red
.orange-yellow
.orange-pear
.orange-green
.orange-mint
.orange-teal
.orange-gray
.orange-slategray
.orange-brown
.orange-wine
.orange-almond
.yellow-blue
.yellow-indigo
.yellow-purple
.yellow-pink
.yellow-red
.yellow-orange
.yellow-pear
.yellow-green
.yellow-mint
.yellow-teal
.yellow-gray
.yellow-slategray
.yellow-brown
.yellow-wine
.yellow-almond
.pear-blue
.pear-indigo
.pear-purple
.pear-pink
.pear-red
.pear-orange
.pear-yellow
.pear-green
.pear-mint
.pear-teal
.pear-gray
.pear-slategray
.pear-brown
.pear-wine
.pear-almond
.green-blue
.green-indigo
.green-purple
.green-pink
.green-red
.green-orange
.green-yellow
.green-pear
.green-mint
.green-teal
.green-gray
.green-slategray
.green-brown
.green-wine
.green-almond
.mint-blue
.mint-indigo
.mint-purple
.mint-pink
.mint-red
.mint-orange
.mint-yellow
.mint-pear
.mint-green
.mint-teal
.mint-gray
.mint-slategray
.mint-brown
.mint-wine
.mint-almond
.teal-blue
.teal-indigo
.teal-purple
.teal-pink
.teal-red
.teal-orange
.teal-yellow
.teal-pear
.teal-green
.teal-mint
.teal-gray
.teal-slategray
.teal-brown
.teal-wine
.teal-almond
.gray-blue
.gray-indigo
.gray-purple
.gray-pink
.gray-red
.gray-orange
.gray-yellow
.gray-pear
.gray-green
.gray-mint
.gray-teal
.gray-slategray
.gray-brown
.gray-wine
.gray-almond
.slategray-blue
.slategray-indigo
.slategray-purple
.slategray-pink
.slategray-red
.slategray-orange
.slategray-yellow
.slategray-pear
.slategray-green
.slategray-mint
.slategray-teal
.slategray-gray
.slategray-brown
.slategray-wine
.slategray-almond
.brown-blue
.brown-indigo
.brown-purple
.brown-pink
.brown-red
.brown-orange
.brown-yellow
.brown-pear
.brown-green
.brown-mint
.brown-teal
.brown-gray
.brown-slategray
.brown-wine
.brown-almond
.wine-blue
.wine-indigo
.wine-purple
.wine-pink
.wine-red
.wine-orange
.wine-yellow
.wine-pear
.wine-green
.wine-mint
.wine-teal
.wine-gray
.wine-slategray
.wine-brown
.wine-almond
.almond-blue
.almond-indigo
.almond-purple
.almond-pink
.almond-red
.almond-orange
.almond-yellow
.almond-pear
.almond-green
.almond-mint
.almond-teal
.almond-gray
.almond-slategray
.almond-brown
.almond-wine

Gradient Background (single color)

Background gradient is combination of two colors, simply choose any a colors to make gradient background color .linear-{color}

.linear-blue
.linear-indigo
.linear-purple
.linear-pink
.linear-red
.linear-orange
.linear-yellow
.linear-pear
.linear-green
.linear-mint
.linear-teal
.linear-gray
.linear-slategray
.linear-brown
.linear-wine
.linear-almond

Background color with alpha

If you want to add some transparency in background color you can use shorthand class .bg-{color}-{alpha}. where alpha value is 10-90

We are using only red color for example, but you can use alpha with any background color

 .bg-red-10
.bg-red-20
.bg-red-30
.bg-red-40
.bg-red-50
.bg-red-60
.bg-red-70
.bg-red-80
.bg-red-90