Background utilities

Background color #

You can set the background-color using .bg-{color}. Please note, background utilities do not set color, so in some cases you'll want to use color utilities. You can see the full list of background utility classes in the table below:

Background gradient #

Use the .bg-gradient class to add a linear gradient as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.

<!-- Setting background gradients -->
<div class="bg-gradient bg-primary">...</div>
<div class="bg-gradient bg-light">...</div>
<div class="bg-gradient bg-dark">...</div>

Opacity #

Consider the default CSS for the .bg-primary utility:

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: hsla(var(--bs-primary-hsl), var(--bs-bg-opacity)) !important;
}

We use an HSL version of our --bs-primary CSS variable and attached a second CSS variable, --bs-bg-opacity, for the alpha transparency (with a default value of 1 thanks to a local CSS variable). That means anytime you use .bg-primary now, your computed color value is hsla(var(--bs-primary-hsl), 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.

Opacity Example #

You can modify the background opacity using the .bg-opacity-{value} utilities, where the {value} can be a percentage of 75, 50, 25, or 10.

<!-- Modifying background opacities with utilities -->
<div class="bg-primary">...</div>
<div class="bg-primary bg-opacity-75">...</div>
<div class="bg-primary bg-opacity-50">...</div>
<div class="bg-primary bg-opacity-25">...</div>
<div class="bg-primary bg-opacity-10">...</div>

You can also override --bs-bg-opacity via custom styles or inline styles.

<!-- Modifying background opacities with CSS variables -->
<div class="bg-primary">...</div>
<div class="bg-primary" style="--bs-bg-opacity: 60%;">...</div>
<div class="bg-primary" style="--bs-bg-opacity: 30%;">...</div>