Learn how to color your element’s background with the background utilities to modify and design your elements easily with shorthand classes
you can customize the colors from the CSS Customization document with css variables.
in the table below you can find a list of shorthand for the most common background-color property as class names to set a background-color for any element.
| Classname | Description | Markup |
|---|---|---|
| .bg-parallax | adding parallax effect for any background image. | <any> |
| .bg-inherit | inherit the background of the parent for any element. | <any> |
| .bg-transparent | set a background color of transparent for any element. | <any> |
| .bg-primary | set a background color of : for any element. | <any> |
| .bg-secondary | set a background color of : for any element. | <any> |
| .bg-success | set a background color of : for any element. | <any> |
| .bg-danger | set a background color of : for any element. | <any> |
| .bg-warning | set a background color of : for any element. | <any> |
| .bg-info | set a background color of : for any element. | <any> |
| .bg-gray | set a background color of : for any element. | <any> |
| .bg-dark | set a background color of : for any element. | <any> |
| .bg-white | set a background color of : for any element. | <any> |
| .bg-alpha-05 | set a background color of : for any element. | <any> |
| .bg-alpha-10 | set a background color of : for any element. | <any> |
| .bg-alpha-25 | set a background color of : for any element. | <any> |
| .bg-alpha-50 | set a background color of : for any element. | <any> |
| .bg-alpha-75 | set a background color of : for any element. | <any> |
in the table below you can find a list of shorthand for the most common background-color property as class names to set a background-color for any element.
| Classname | Description | Markup |
|---|---|---|
| .bg-facebook | set a background color of : for any element. | <any> |
| .bg-twitter | set a background color of : for any element. | <any> |
| .bg-google-red | set a background color of : for any element. | <any> |
| .bg-youtube | set a background color of : for any element. | <any> |
| .bg-instagram | set a background color of : for any element. | <any> |
| .bg-snapchat | set a background color of : for any element. | <any> |
| .bg-whatsapp | set a background color of : for any element. | <any> |
| .bg-pinterest | set a background color of : for any element. | <any> |
| .bg-linkedin | set a background color of : for any element. | <any> |
| .bg-behance | set a background color of : for any element. | <any> |
| .bg-dribbble | set a background color of : for any element. | <any> |
| .bg-flicker | set a background color of : for any element. | <any> |
in the table below you can find a list of shorthand for Gradient Backgrounds class names to set a gradient background-image for any element.
| Classname | Description | Markup |
|---|---|---|
| .bg-grade-primary | set a background image of : for any element. | <any> |
| .bg-grade-secondary | set a background image of : for any element. | <any> |
| .bg-grade-warning | set a background image of : for any element. | <any> |
| .bg-grade-danger | set a background image of : for any element. | <any> |
| .bg-grade-success | set a background image of : for any element. | <any> |
| .bg-grade-water | set a background image of : for any element. | <any> |
| .bg-grade-ice | set a background image of : for any element. | <any> |
| .bg-grade-fire | set a background image of : for any element. | <any> |
| .bg-grade-purple | set a background image of : for any element. | <any> |
in the next table is a list of helper classes to rotate the .bg-grade-* backgrounds to the way you need.
| Classname | Description | Markup |
|---|---|---|
| .bg-grade-45 | change the gradient background rotation like : 45deg . | <any> |
| .bg-grade-90 | change the gradient background rotation like : 90deg . | <any> |
| .bg-grade-180 | change the gradient background rotation like : 180deg . | <any> |
| .bg-grade-45n | change the gradient background rotation like : -45deg . | <any> |
| .bg-grade-90n | change the gradient background rotation like : -90deg . | <any> |
| .bg-grade-180n | change the gradient background rotation like : -180deg . | <any> |
in the table below you can find a list of shorthand for the most common background-color property as class names to set a background-color for any element.
| Classname | Description | Markup |
|---|---|---|
| .bg-offwhite-primary | set a background color of : for any element. | <any> |
| .bg-offwhite-secondary | set a background color of : for any element. | <any> |
| .bg-offwhite-info | set a background color of : for any element. | <any> |
| .bg-offwhite-gray | set a background color of : for any element. | <any> |
| .bg-offwhite-dark | set a background color of : for any element. | <any> |
| .bg-offwhite-success | set a background color of : for any element. | <any> |
| .bg-offwhite-danger | set a background color of : for any element. | <any> |
| .bg-offwhite-warning | set a background color of : for any element. | <any> |
| .bg-offwhite-smoke | set a background color of : for any element. | <any> |
| .bg-offwhite-snow | set a background color of : for any element. | <any> |
| .bg-offwhite-honeydew | set a background color of : for any element. | <any> |
| .bg-offwhite-mintcream | set a background color of : for any element. | <any> |
| .bg-offwhite-azure | set a background color of : for any element. | <any> |
| .bg-offwhite-aliceblue | set a background color of : for any element. | <any> |
| .bg-offwhite-ghost | set a background color of : for any element. | <any> |
| .bg-offwhite-seashell | set a background color of : for any element. | <any> |
| .bg-offwhite-beige | set a background color of : for any element. | <any> |
| .bg-offwhite-oldlace | set a background color of : for any element. | <any> |
| .bg-offwhite-floral | set a background color of : for any element. | <any> |
| .bg-offwhite-ivory | set a background color of : for any element. | <any> |
| .bg-offwhite-antique | set a background color of : for any element. | <any> |
| .bg-offwhite-linen | set a background color of : for any element. | <any> |
| .bg-offwhite-lavenderblush | set a background color of : for any element. | <any> |