Solid Color Background

For backgrounds, use .bg-* with any color from a predefined set of 270+ colors. Choose from 22 base colors with respective light & dark shades. See full list of colors here.

ClassValues
class="bg-[value]"primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke
Light background
ClassValues
class="bg-light"This is a base light color.
class="bg-light-[value]"10 / 15 / 20 / 30 / 40 / 50 / 60 / 70 / 80 / 90
Dark background
ClassValues
class="bg-dark"This is a base dark color.
class="bg-dark-[value]"20 / 40 / 60 / 80 / 100
Gradient Background

A beautiful set of predefined gradient colors is a ready to flaunt design element. Simply add .bg-gradient-*.

Danger
#f83f37
#ab26aa
Primary
#00acf0
#6640b2
Info
#1ebccd
#3a55b1
Success
#22af47
#d0d962
Warning
#ffbf36
#ff6028
Secondary
#9e9e9e
#5e7d8a
Light
#f5f5f6
#9e9e9e
Dark
#324148
#7a5449
Pony
#ed1b60
#1ebccd
Space
#ab26aa
#fde335
Streaks
#6640b2
#009b84
Bunting
#3a55b1
#7a5449
Paradise
#0092ee
#88c241
Honey
#d0d962
#ff9528
Warbler
#fde335
#9e9e9e
Heaven
#88c241
#00acf0
Dusk
#ff9528
#6640b2
Citrine
#ff6028
#7a5449
Royston
#7a5449
#009b84
Ashes
#5e7d8a
#324148
Metal
#c1993f
#9e9e9e
Sunset
#009b84
#ff6028
ClassValues
class="bg-gradient-[value]"primary / success / warning / danger / info / light / dark / secondary / pony / space / streaks / bunting / paradise / honey / warbler / heaven / dusk / citrine / royston / ashes / metal / sunset
Transparent Background

A set of dark & light background is made with different transparencies.

img
img
ClassValues
class="bg-trans-light-[value]"
class="bg-trans-dark-[value]"
10 / 15 / 20 / 25 / 30 / 35 / 40 / 45 / 50 / 55 / 60 / 65 / 70 / 75 / 80 / 85 / 90 / 95