# Bootstrap 5 Background with CoreUI

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

## Bootstrap 5 Background – 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](/utilities/colors/llm.md).

```html

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-primary-subtle text-primary-emphasis">.bg-primary-subtle</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-secondary-subtle text-secondary-emphasis">.bg-secondary-subtle</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-success-subtle text-success-emphasis">.bg-success-subtle</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-danger-subtle text-danger-emphasis">.bg-danger-subtle</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-warning-subtle text-warning-emphasis">.bg-warning-subtle</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-info-subtle text-info-emphasis">.bg-info-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>
```

## Bootstrap 5 Background – 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>


## Bootstrap 5 Background – Opacity

<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v4.1.0</small>


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.

### Bootstrap 5 Background – 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.

### Bootstrap 5 Background – Example

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

```html
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2" style="--cui-bg-opacity: .5;">This is 50% opacity success background</div>
```

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

```html
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
```

## Bootstrap 5 Background – Sass

In addition to the following Sass functionality, consider reading about our included [CSS custom properties](/customize/css-variables/llm.md) (aka CSS variables) for colors and more.

### Bootstrap 5 Background – Variables

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

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

```

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

```

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

```

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

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

```

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

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

```

### Bootstrap 5 Background – 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
);

```

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
);

```

RGB colors are generated from a separate Sass map:

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

```

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)
  )
);
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$prefix", "$key", "bg");

$utilities-bg-subtle: (
  "primary-subtle": var(--#{$prefix}primary-bg-subtle),
  "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
  "success-subtle": var(--#{$prefix}success-bg-subtle),
  "info-subtle": var(--#{$prefix}info-bg-subtle),
  "warning-subtle": var(--#{$prefix}warning-bg-subtle),
  "danger-subtle": var(--#{$prefix}danger-bg-subtle),
  "light-subtle": var(--#{$prefix}light-bg-subtle),
  "dark-subtle": var(--#{$prefix}dark-bg-subtle)
);

```

### Bootstrap 5 Background – 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(--#{$prefix}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);
}

```

### Bootstrap 5 Background – Utilities API

Background utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.](/utilities/api/llm.md)

```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(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
      "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}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
),
```