Background Coloring
Learn how to color your elements background with the background utilities to modify and design your elements easily with shorthand classes
Colors Customize
you can customize the colors from the CSS Customization document with css variables.
Assets Backgrounds
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> |
Brands Backgrounds
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> |
Gradients Backgrounds
in the table below you can find a list of shorthand for Gradient Backgrounds class names to set a gradient background- for any element.image
| 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> |
Gradients Rotations
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> |
Off-white Backgrounds
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> |