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 |
Background gradient is combination of two colors, simply choose any two colors to make gradient background color .{first-color}-{second-color}
Background gradient is combination of two colors, simply choose any a colors to make gradient background color .linear-{color}
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 |