Background utilities

Utility classes which can be used to set the background-color of elements, and add decoration with gradients.

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>

Up next
Border utilities

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.