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-*
.
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 |