# Background

Background utilities are used to manipulate the appearance of the background of any element.

## Background Color

Background color utilities follow the contextual classes defined in the color map and are named using the format `.bg-{color}` where color is any color defined in the color map. A transparent option is also available.

Background color utilities do not set the background color of an element, so in some cases you will need to use text utilities alongside a background color utility.

The demo below features elements with the various background color options that have been styled with padding and box shadow applied.

`.bg-primary`
`.bg-secondary`
`.bg-success`
`.bg-danger`
`.bg-warning`
`.bg-info`
`.bg-light`
`.bg-white`
`.bg-dark`
`.bg-black`
`.bg-transparent`

## Background Gradient

Background gradient utilities use the background image property to overlay a solid color with a semi-transparent gradient. Simply append any background utility with the `.bg-gradient` class to acheive the gradient effect.

`.bg-primary.bg-gradient`
`.bg-secondary.bg-gradient`
`.bg-success.bg-gradient`
`.bg-danger.bg-gradient`
`.bg-warning.bg-gradient`
`.bg-info.bg-gradient`
`.bg-light.bg-gradient`
`.bg-dark.bg-gradient`

## Background Pattern

Two options for stylish background patterns have been included with Material Admin Pro. The 'Doubs' and 'Waihou' patterns from Paaatterns have be written as utility classes to include these designs.

`.bg-pattern-doubs`
`.bg-pattern-waihou`

### Related Links

Text Utilities

Material Admin Pro text utilities

Related Link arrow_upward
Bootstrap Color Utilities Documentation

Bootstrap's color utilities

Related Link arrow_upward