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.
| Class | Values |
|---|---|
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
| Class | Values |
|---|---|
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
| Class | Values |
|---|---|
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
#c1993f
#9e9e9e
Sunset
#009b84
#ff6028
| Class | Values |
|---|---|
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.
| Class | Values |
|---|---|
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 |