🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%


Background utility classes.

🔍 On this page:

  1. Background Color
  2. Background Opacity
  3. Background Image
  4. Background Gradients

Background Color #

Edit the background color of an element.

Background Contrast Scale #

Class Description
.bg background-color: var(--color-bg);
.bg-contrast-lower background-color: var(--color-contrast-lower);
.bg-contrast-low background-color: var(--color-contrast-low);
.bg-contrast-medium background-color: var(--color-contrast-medium);
.bg-contrast-high background-color: var(--color-contrast-high);
.bg-contrast-higher background-color: var(--color-contrast-higher);

Background Primary #

Class Description
.bg-primary-darker background-color: var(--color-primary-darker);
.bg-primary-dark background-color: var(--color-primary-dark);
.bg-primary background-color: var(--color-primary);
.bg-primary-light background-color: var(--color-primary-light);
.bg-primary-lighter background-color: var(--color-primary-lighter);

Background Accent #

Class Description
.bg-accent-darker background-color: var(--color-accent-darker);
.bg-accent-dark background-color: var(--color-accent-dark);
.bg-accent background-color: var(--color-accent);
.bg-accent-light background-color: var(--color-accent-light);
.bg-accent-lighter background-color: var(--color-accent-lighter);

Background Feedback #

Class Description
.bg-success-darker background-color: var(--color-success-darker);
.bg-success-dark background-color: var(--color-success-dark);
.bg-success background-color: var(--color-success);
.bg-success-light background-color: var(--color-success-light);
.bg-success-lighter background-color: var(--color-success-lighter);
.bg-warning-darker background-color: var(--color-warning-darker);
.bg-warning-dark background-color: var(--color-warning-dark);
.bg-warning background-color: var(--color-warning);
.bg-warning-light background-color: var(--color-warning-light);
.bg-warning-lighter background-color: var(--color-warning-lighter);
.bg-error-darker background-color: var(--color-error-darker);
.bg-error-dark background-color: var(--color-error-dark);
.bg-error background-color: var(--color-error);
.bg-error-light background-color: var(--color-error-light);
.bg-error-lighter background-color: var(--color-error-lighter);

Black & White #

Class Description
.bg-white background-color: var(--color-white, white);
.bg-black background-color: var(--color-black, black);

Misc #

Class Description
.bg-transparent background-color: transparent;
.bg-inherit background-color: inherit;

Background Opacity #

If you use a background color utility class, you can modify the background opacity using one of the following classes:

Class Description
.bg-opacity-0 background opacity 0%
.bg-opacity-10% background opacity 10%
.bg-opacity-20% background opacity 20%
.bg-opacity-30% background opacity 30%
.bg-opacity-40% background opacity 40%
.bg-opacity-50% background opacity 50%
.bg-opacity-60% background opacity 60%
.bg-opacity-70% background opacity 70%
.bg-opacity-80% background opacity 80%
.bg-opacity-90% background opacity 90%

Usage example:

<div class="bg-primary bg-opacity-50%"> <!-- content --> </div> 

How to create custom background opacity classes:

.bg-opacity-075\% {
  --bg-o: 0.075;

.bg-opacity-15\% {
  --bg-o: 0.15;

Background Image #

Background-image utility classes:

Class Description
.bg-cover background-size: cover;
.bg-center background-position: center;
.bg-no-repeat background-repeat: no-repeat;

Example - How to add a background image to a section:

<div class="bg-cover background-center" style="background-image: url('/assets/img/photo.jpg');">
  <!-- ... -->

Background Gradients #

If you've created one or more gradients using the Color Editor, the tool will generate a collection of background utility classes based on the gradient's name.

For example, if you create a --gradient-primary color, you'll get the following classes:

Class Description
.bg-gradient-primary radial gradient
.bg-gradient-primary-top linear gradient to top
.bg-gradient-primary-right linear gradient to right
.bg-gradient-primary-bottom linear gradient to bottom
.bg-gradient-primary-left linear gradient to left
<div class="bg-gradient-primary-bottom">
  <!-- ... -->

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us