Background

Color

.bg-white
{ background-color: rgba(255, 255, 255, var(--bg-opacity)) }
.bg-gray
{ background-color: rgba(80, 81, 82, var(--bg-opacity)) }
.bg-green
{ background-color: rgba(151, 200, 72, var(--bg-opacity)) }
.bg-blue
{ background-color: rgba(9, 148, 226, var(--bg-opacity)) }
.bg-red
{ background-color: rgba(225, 86, 62, var(--bg-opacity)) }
.bg-yellow
{ background-color: rgba(215, 229, 66, var(--bg-opacity)) }
.bg-purple
{ background-color: rgba(148, 97, 185, var(--bg-opacity)) }
.bg-gray-90
{ background-color: rgba(25.1851851852, 25.5, 25.8148148148, var(--bg-opacity)) }
.bg-gray-80
{ background-color: rgba(50.3703703704, 51, 51.6296296296, var(--bg-opacity)) }
.bg-gray-70
{ background-color: rgba(75.5555555556, 76.5, 77.4444444444, var(--bg-opacity)) }
.bg-gray-60
{ background-color: rgba(100.7407407407, 102, 103.2592592593, var(--bg-opacity)) }
.bg-gray-50
{ background-color: rgba(125.9259259259, 127.5, 129.0740740741, var(--bg-opacity)) }
.bg-gray-40
{ background-color: rgba(151.7407407407, 153, 154.2592592593, var(--bg-opacity)) }
.bg-gray-30
{ background-color: rgba(177.5555555556, 178.5, 179.4444444444, var(--bg-opacity)) }
.bg-gray-20
{ background-color: rgba(203.3703703704, 204, 204.6296296296, var(--bg-opacity)) }
.bg-gray-10
{ background-color: rgba(229.1851851852, 229.5, 229.8148148148, var(--bg-opacity)) }
.bg-green-90
{ background-color: rgba(31.4765625, 51, 0, var(--bg-opacity)) }
.bg-green-80
{ background-color: rgba(61.5719866071, 96.1071428571, 5.8928571429, var(--bg-opacity)) }
.bg-green-70
{ background-color: rgba(90.2862723214, 135.3214285714, 17.6785714286, var(--bg-opacity)) }
.bg-green-60
{ background-color: rgba(117.6194196429, 168.6428571429, 35.3571428571, var(--bg-opacity)) }
.bg-green-50
{ background-color: rgba(143.5714285714, 196.0714285714, 58.9285714286, var(--bg-opacity)) }
.bg-green-40
{ background-color: rgba(168.6194196429, 219.6428571429, 86.3571428571, var(--bg-opacity)) }
.bg-green-30
{ background-color: rgba(192.2862723214, 237.3214285714, 119.6785714286, var(--bg-opacity)) }
.bg-green-20
{ background-color: rgba(214.5719866071, 249.1071428571, 158.8928571429, var(--bg-opacity)) }
.bg-green-10
{ background-color: rgba(235.4765625, 255, 204, var(--bg-opacity)) }
.bg-blue-90
{ background-color: rgba(0, 32.668202765, 51, var(--bg-opacity)) }
.bg-blue-80
{ background-color: rgba(0.9765957447, 65.0618786156, 101.0234042553, var(--bg-opacity)) }
.bg-blue-70
{ background-color: rgba(2.929787234, 97.1810275517, 150.070212766, var(--bg-opacity)) }
.bg-blue-60
{ background-color: rgba(5.8595744681, 129.0256495735, 198.1404255319, var(--bg-opacity)) }
.bg-blue-50
{ background-color: rgba(9.7659574468, 160.5957446809, 245.2340425532, var(--bg-opacity)) }
.bg-blue-40
{ background-color: rgba(56.8595744681, 180.0256495735, 249.1404255319, var(--bg-opacity)) }
.bg-blue-30
{ background-color: rgba(104.929787234, 199.1810275517, 252.070212766, var(--bg-opacity)) }
.bg-blue-20
{ background-color: rgba(153.9765957447, 218.0618786156, 254.0234042553, var(--bg-opacity)) }
.bg-blue-10
{ background-color: rgba(204, 236.668202765, 255, var(--bg-opacity)) }
.bg-red-90
{ background-color: rgba(51, 7.509202454, 0, var(--bg-opacity)) }
.bg-red-80
{ background-color: rgba(98.5695067265, 17.4386915734, 3.4304932735, var(--bg-opacity)) }
.bg-red-70
{ background-color: rgba(142.7085201794, 29.7884673581, 10.2914798206, var(--bg-opacity)) }
.bg-red-60
{ background-color: rgba(183.4170403587, 44.5585298082, 20.5829596413, var(--bg-opacity)) }
.bg-red-50
{ background-color: rgba(220.6950672646, 61.7488789238, 34.3049327354, var(--bg-opacity)) }
.bg-red-40
{ background-color: rgba(234.4170403587, 95.5585298082, 71.5829596413, var(--bg-opacity)) }
.bg-red-30
{ background-color: rgba(244.7085201794, 131.7884673581, 112.2914798206, var(--bg-opacity)) }
.bg-red-20
{ background-color: rgba(251.5695067265, 170.4386915734, 156.4304932735, var(--bg-opacity)) }
.bg-red-10
{ background-color: rgba(255, 211.509202454, 204, var(--bg-opacity)) }
.bg-yellow-90
{ background-color: rgba(46.6196319018, 51, 0, var(--bg-opacity)) }
.bg-yellow-80
{ background-color: rgba(90.6852618062, 98.9162790698, 3.0837209302, var(--bg-opacity)) }
.bg-yellow-70
{ background-color: rgba(132.1968897132, 143.7488372093, 9.2511627907, var(--bg-opacity)) }
.bg-yellow-60
{ background-color: rgba(171.1545156228, 185.4976744186, 18.5023255814, var(--bg-opacity)) }
.bg-yellow-50
{ background-color: rgba(207.5581395349, 224.1627906977, 30.8372093023, var(--bg-opacity)) }
.bg-yellow-40
{ background-color: rgba(222.1545156228, 236.4976744186, 69.5023255814, var(--bg-opacity)) }
.bg-yellow-30
{ background-color: rgba(234.1968897132, 245.7488372093, 111.2511627907, var(--bg-opacity)) }
.bg-yellow-20
{ background-color: rgba(243.6852618062, 251.9162790698, 156.0837209302, var(--bg-opacity)) }
.bg-yellow-10
{ background-color: rgba(250.6196319018, 255, 204, var(--bg-opacity)) }
.bg-purple-90
{ background-color: rgba(29.5568181818, 0, 51, var(--bg-opacity)) }
.bg-purple-80
{ background-color: rgba(57.8681220096, 7.8289473684, 94.1710526316, var(--bg-opacity)) }
.bg-purple-70
{ background-color: rgba(84.9339114833, 23.4868421053, 129.5131578947, var(--bg-opacity)) }
.bg-purple-60
{ background-color: rgba(110.7541866029, 46.9736842105, 157.0263157895, var(--bg-opacity)) }
.bg-purple-50
{ background-color: rgba(135.3289473684, 78.2894736842, 176.7105263158, var(--bg-opacity)) }
.bg-purple-40
{ background-color: rgba(161.7541866029, 97.9736842105, 208.0263157895, var(--bg-opacity)) }
.bg-purple-30
{ background-color: rgba(186.9339114833, 125.4868421053, 231.5131578947, var(--bg-opacity)) }
.bg-purple-20
{ background-color: rgba(210.8681220096, 160.8289473684, 247.1710526316, var(--bg-opacity)) }
.bg-purple-10
{ background-color: rgba(233.5568181818, 204, 255, var(--bg-opacity)) }
.bg-none
{ background: transparent }

Color Opacity

.bg-opacity-0
{ --bg-opacity: 0 }
.bg-opacity-10
{ --bg-opacity: 0.1 }
.bg-opacity-20
{ --bg-opacity: 0.2 }
.bg-opacity-30
{ --bg-opacity: 0.3 }
.bg-opacity-40
{ --bg-opacity: 0.4 }
.bg-opacity-50
{ --bg-opacity: 0.5 }
.bg-opacity-60
{ --bg-opacity: 0.6 }
.bg-opacity-70
{ --bg-opacity: 0.7 }
.bg-opacity-80
{ --bg-opacity: 0.8 }
.bg-opacity-90
{ --bg-opacity: 0.9 }
.bg-opacity-100
{ --bg-opacity: 1 }

Miscellaneous

.bg-white
{ background-color: rgba(255, 255, 255, var(--bg-opacity)) }
.bg-gray
{ background-color: rgba(80, 81, 82, var(--bg-opacity)) }
.bg-green
{ background-color: rgba(151, 200, 72, var(--bg-opacity)) }
.bg-blue
{ background-color: rgba(9, 148, 226, var(--bg-opacity)) }
.bg-red
{ background-color: rgba(225, 86, 62, var(--bg-opacity)) }
.bg-yellow
{ background-color: rgba(215, 229, 66, var(--bg-opacity)) }
.bg-purple
{ background-color: rgba(148, 97, 185, var(--bg-opacity)) }
.bg-gray-90
{ background-color: rgba(25.1851851852, 25.5, 25.8148148148, var(--bg-opacity)) }
.bg-gray-80
{ background-color: rgba(50.3703703704, 51, 51.6296296296, var(--bg-opacity)) }
.bg-gray-70
{ background-color: rgba(75.5555555556, 76.5, 77.4444444444, var(--bg-opacity)) }
.bg-gray-60
{ background-color: rgba(100.7407407407, 102, 103.2592592593, var(--bg-opacity)) }
.bg-gray-50
{ background-color: rgba(125.9259259259, 127.5, 129.0740740741, var(--bg-opacity)) }
.bg-gray-40
{ background-color: rgba(151.7407407407, 153, 154.2592592593, var(--bg-opacity)) }
.bg-gray-30
{ background-color: rgba(177.5555555556, 178.5, 179.4444444444, var(--bg-opacity)) }
.bg-gray-20
{ background-color: rgba(203.3703703704, 204, 204.6296296296, var(--bg-opacity)) }
.bg-gray-10
{ background-color: rgba(229.1851851852, 229.5, 229.8148148148, var(--bg-opacity)) }
.bg-green-90
{ background-color: rgba(31.4765625, 51, 0, var(--bg-opacity)) }
.bg-green-80
{ background-color: rgba(61.5719866071, 96.1071428571, 5.8928571429, var(--bg-opacity)) }
.bg-green-70
{ background-color: rgba(90.2862723214, 135.3214285714, 17.6785714286, var(--bg-opacity)) }
.bg-green-60
{ background-color: rgba(117.6194196429, 168.6428571429, 35.3571428571, var(--bg-opacity)) }
.bg-green-50
{ background-color: rgba(143.5714285714, 196.0714285714, 58.9285714286, var(--bg-opacity)) }
.bg-green-40
{ background-color: rgba(168.6194196429, 219.6428571429, 86.3571428571, var(--bg-opacity)) }
.bg-green-30
{ background-color: rgba(192.2862723214, 237.3214285714, 119.6785714286, var(--bg-opacity)) }
.bg-green-20
{ background-color: rgba(214.5719866071, 249.1071428571, 158.8928571429, var(--bg-opacity)) }
.bg-green-10
{ background-color: rgba(235.4765625, 255, 204, var(--bg-opacity)) }
.bg-blue-90
{ background-color: rgba(0, 32.668202765, 51, var(--bg-opacity)) }
.bg-blue-80
{ background-color: rgba(0.9765957447, 65.0618786156, 101.0234042553, var(--bg-opacity)) }
.bg-blue-70
{ background-color: rgba(2.929787234, 97.1810275517, 150.070212766, var(--bg-opacity)) }
.bg-blue-60
{ background-color: rgba(5.8595744681, 129.0256495735, 198.1404255319, var(--bg-opacity)) }
.bg-blue-50
{ background-color: rgba(9.7659574468, 160.5957446809, 245.2340425532, var(--bg-opacity)) }
.bg-blue-40
{ background-color: rgba(56.8595744681, 180.0256495735, 249.1404255319, var(--bg-opacity)) }
.bg-blue-30
{ background-color: rgba(104.929787234, 199.1810275517, 252.070212766, var(--bg-opacity)) }
.bg-blue-20
{ background-color: rgba(153.9765957447, 218.0618786156, 254.0234042553, var(--bg-opacity)) }
.bg-blue-10
{ background-color: rgba(204, 236.668202765, 255, var(--bg-opacity)) }
.bg-red-90
{ background-color: rgba(51, 7.509202454, 0, var(--bg-opacity)) }
.bg-red-80
{ background-color: rgba(98.5695067265, 17.4386915734, 3.4304932735, var(--bg-opacity)) }
.bg-red-70
{ background-color: rgba(142.7085201794, 29.7884673581, 10.2914798206, var(--bg-opacity)) }
.bg-red-60
{ background-color: rgba(183.4170403587, 44.5585298082, 20.5829596413, var(--bg-opacity)) }
.bg-red-50
{ background-color: rgba(220.6950672646, 61.7488789238, 34.3049327354, var(--bg-opacity)) }
.bg-red-40
{ background-color: rgba(234.4170403587, 95.5585298082, 71.5829596413, var(--bg-opacity)) }
.bg-red-30
{ background-color: rgba(244.7085201794, 131.7884673581, 112.2914798206, var(--bg-opacity)) }
.bg-red-20
{ background-color: rgba(251.5695067265, 170.4386915734, 156.4304932735, var(--bg-opacity)) }
.bg-red-10
{ background-color: rgba(255, 211.509202454, 204, var(--bg-opacity)) }
.bg-yellow-90
{ background-color: rgba(46.6196319018, 51, 0, var(--bg-opacity)) }
.bg-yellow-80
{ background-color: rgba(90.6852618062, 98.9162790698, 3.0837209302, var(--bg-opacity)) }
.bg-yellow-70
{ background-color: rgba(132.1968897132, 143.7488372093, 9.2511627907, var(--bg-opacity)) }
.bg-yellow-60
{ background-color: rgba(171.1545156228, 185.4976744186, 18.5023255814, var(--bg-opacity)) }
.bg-yellow-50
{ background-color: rgba(207.5581395349, 224.1627906977, 30.8372093023, var(--bg-opacity)) }
.bg-yellow-40
{ background-color: rgba(222.1545156228, 236.4976744186, 69.5023255814, var(--bg-opacity)) }
.bg-yellow-30
{ background-color: rgba(234.1968897132, 245.7488372093, 111.2511627907, var(--bg-opacity)) }
.bg-yellow-20
{ background-color: rgba(243.6852618062, 251.9162790698, 156.0837209302, var(--bg-opacity)) }
.bg-yellow-10
{ background-color: rgba(250.6196319018, 255, 204, var(--bg-opacity)) }
.bg-purple-90
{ background-color: rgba(29.5568181818, 0, 51, var(--bg-opacity)) }
.bg-purple-80
{ background-color: rgba(57.8681220096, 7.8289473684, 94.1710526316, var(--bg-opacity)) }
.bg-purple-70
{ background-color: rgba(84.9339114833, 23.4868421053, 129.5131578947, var(--bg-opacity)) }
.bg-purple-60
{ background-color: rgba(110.7541866029, 46.9736842105, 157.0263157895, var(--bg-opacity)) }
.bg-purple-50
{ background-color: rgba(135.3289473684, 78.2894736842, 176.7105263158, var(--bg-opacity)) }
.bg-purple-40
{ background-color: rgba(161.7541866029, 97.9736842105, 208.0263157895, var(--bg-opacity)) }
.bg-purple-30
{ background-color: rgba(186.9339114833, 125.4868421053, 231.5131578947, var(--bg-opacity)) }
.bg-purple-20
{ background-color: rgba(210.8681220096, 160.8289473684, 247.1710526316, var(--bg-opacity)) }
.bg-purple-10
{ background-color: rgba(233.5568181818, 204, 255, var(--bg-opacity)) }
.bg-none
{ background: transparent }