bootstrap/site/content/docs/5.0/utilities/background.md

layout	title	description	group	toc
docs	Background	Convey meaning through `background-color` and add decoration with gradients.	utilities	true

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]({{< docsref "/utilities/colors" >}}).

{{< example >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }}

.bg-{{ .name }}

{{- end -}} {{< /colors.inline >}}

.bg-body

.bg-white

.bg-transparent

{{< /example >}}

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(--bs-gradient);.

{{< markdown >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }}

.bg-{{ .name }}.bg-gradient

{{- end -}} {{< /colors.inline >}} {{< /markdown >}}

Sass

In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/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-docs name="color-variables" file="scss/_variables.scss" >}}

{{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}}

{{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}}

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

{{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}}

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-docs name="theme-colors-map" file="scss/_variables.scss" >}}

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

{{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}}

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-docs name="gradient-bg-mixin" file="scss/mixins/_gradients.scss" >}}

{{< scss-docs name="gradient-mixins" file="scss/mixins/_gradients.scss" >}}

Utilities API

Background utilities are declared in our utilities API in scss/_utilities.scss. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

{{< scss-docs name="utils-bg-color" file="scss/_utilities.scss" >}}