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 fulllist of colorshere.
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-*
.
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
|