# Bootstrap 5 Background

> Convey meaning through `background-color` and add decoration with gradients.

## Background color

Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` [color utilities](https://coreui.io/bootstrap/docs/utilities/colors/).

```html
<div class="p-3 mb-2 bg-${c.name} ${c.contrast_color ? 
 : 
}">.bg-${c.name}</div>
<div class="p-3 mb-2 bg-${c.name}-subtle text-${c.name}-emphasis">.bg-${c.name}-subtle</div>
<p class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p>
<p class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</p>

<div class="p-3 mb-2 bg-body text-body">.bg-body</div>
<div class="p-3 mb-2 bg-black text-white">.bg-black</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>
```

## Background gradient

By adding a `.bg-gradient` class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.

Do you need a gradient in your custom CSS? Just add `background-image: var(gradient);`.

<div class="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primary.bg-gradient</div>
<div class="p-3 mb-2 bg-secondary bg-gradient text-white">.bg-secondary.bg-gradient</div>
<div class="p-3 mb-2 bg-success bg-gradient text-white">.bg-success.bg-gradient</div>
<div class="p-3 mb-2 bg-danger bg-gradient text-white">.bg-danger.bg-gradient</div>
<div class="p-3 mb-2 bg-warning bg-gradient text-dark">.bg-warning.bg-gradient</div>
<div class="p-3 mb-2 bg-info bg-gradient text-dark">.bg-info.bg-gradient</div>
<div class="p-3 mb-2 bg-black bg-gradient text-white">.bg-black.bg-gradient</div>

## Opacity

_Added in 4.1.0._

As of v4.1.0, `background-color` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.

### How it works

Consider our default `.bg-success` utility.

```css
.bg-success {
  --cui-bg-opacity: 1;
  background-color: rgba(var(--cui-success-rgb), var(--cui-bg-opacity)) !important;
}
```

We use an RGB version of our `--cui-success` (with the value of `25, 135, 84`) CSS variable and attached a second CSS variable, `--cui-bg-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.bg-success` now, your computed `color` value is `rgba(25, 135, 84, 1)`. The local CSS variable inside each `.bg-*` class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.

### Example

To change that opacity, override `--cui-bg-opacity` via custom styles or inline styles.

Or, choose from any of the `.bg-opacity` utilities:

## Sass

In addition to the following Sass functionality, consider reading about our included [CSS custom properties](https://coreui.io/bootstrap/docs/customize/css-variables/) (aka CSS variables) for colors and more.

### Variables

Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables.

```scss
$blue:    #0d6efd !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #d63384 !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #198754 !default;
$teal:    #20c997 !default;
$cyan:    #0dcaf0 !default;
```

```scss
$primary:       #5856d6 !default;
$secondary:     #6b7785 !default;
$success:       #1b9e3e !default;
$info:          #39f !default;
$warning:       #f9b115 !default;
$danger:        #e55353 !default;
$light:         $gray-100 !default;
$dark:          $gray-900 !default;
```

```scss
$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
```

Grayscale colors are also available, but only a subset are used to generate any utilities.

```scss
$white:     #fff !default;
$gray-base: #323a49 !default;
$gray-100:  #f3f4f7 !default;
$gray-200:  #e7eaee !default;
$gray-300:  #dbdfe6 !default;
$gray-400:  #cfd4de !default;
$gray-500:  #aab3c5 !default;
$gray-600:  #6d7d9c !default;
$gray-700:  #4a566d !default;
$gray-800:  #323a49 !default;
$gray-900:  #212631 !default;
$black:     #080a0c !default;
```

Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode:

```scss
$primary-bg-subtle:    #cfc7f3 !default;
$secondary-bg-subtle:  #ced2d8 !default;
$success-bg-subtle:    #cbedd6 !default;
$info-bg-subtle:       #c0e6ff !default;
$warning-bg-subtle:    #feecc5 !default;
$danger-bg-subtle:     #f9d4d4 !default;
$light-bg-subtle:      color.mix($gray-100, $white) !default;
$dark-bg-subtle:       $gray-400 !default;
```

### Map

Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.

```scss
$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
) !default;
```

Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.**

```scss
$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
) !default;
```

RGB colors are generated from a separate Sass map:

```scss
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
```

And background color opacities build on that with their own map that's consumed by the utilities API:

```scss
$utilities-bg: map.merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-bg)
  )
) !default;
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$prefix", "$key", "bg") !default;

$utilities-bg-subtle: (
  "primary-subtle": var(--cui-primary-bg-subtle),
  "secondary-subtle": var(--cui-secondary-bg-subtle),
  "success-subtle": var(--cui-success-bg-subtle),
  "info-subtle": var(--cui-info-bg-subtle),
  "warning-subtle": var(--cui-warning-bg-subtle),
  "danger-subtle": var(--cui-danger-bg-subtle),
  "light-subtle": var(--cui-light-bg-subtle),
  "dark-subtle": var(--cui-dark-bg-subtle)
) !default;
```

### Mixins

**No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you'd like to create your own gradients.

```scss
@mixin gradient-bg($color: null) {
  background-color: $color;

  @if $enable-gradients {
    background-image: var(--cui-gradient);
  }
}
```

```scss
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
}

// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
}

@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
  background-image: linear-gradient($deg, $start-color, $end-color);
}

@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
}

@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
}

@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
  background-image: radial-gradient(circle, $inner-color, $outer-color);
}

@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}
```

### Utilities API

Background utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.](https://coreui.io/bootstrap/docs/utilities/api/#using-the-api)

```scss
"background-color": (
  property: background-color,
  class: bg,
  dark-mode: true,
  local-vars: (
    "bg-opacity": 1
  ),
  values: map.merge(
    $utilities-bg-colors,
    (
      "transparent": transparent,
      "body-secondary": rgba(var(--cui-secondary-bg-rgb), var(--cui-bg-opacity)),
      "body-tertiary": rgba(var(--cui-tertiary-bg-rgb), var(--cui-bg-opacity)),
    )
  )
),
"bg-opacity": (
  css-var: true,
  class: bg-opacity,
  values: (
    10: .1,
    15: .15,
    25: .25,
    50: .5,
    75: .75,
    100: 1
  )
),
"subtle-background-color": (
  property: background-color,
  class: bg,
  dark-mode: true,
  values: $utilities-bg-subtle
),
```