Background Color

Convey meaning through background and add decoration with gradients.


Available colors

This design system is all about making your website look amazing. Colors are an important aspect of it so we took the time to create a comprehensive color system, supporting different usage scenarios, and make it super-friendly to future changes and dark mode.

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.

Theme colors (Semantic)

Semantic colors denote standard value states (such as good, bad, or warning). Each color has the same basic meaning in all contexts. It also helps you set your brand's colors and remain consistent when using it throughout the website using the .bg-primary, .bg-secondary, and .bg-tertiary classes.

.bg-primary
.bg-secondary
.bg-tertiary
.bg-success
.bg-warning
.bg-info
.bg-danger

Shades

Each theme color has a lighter or darker variant. Use .bg-tint-COLOR or .bg-shade-COLOR to use it.


Gradients

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.

.bg-gradient .bg-primary
.bg-gradient .bg-secondary
.bg-gradient .bg-tertiary
.bg-gradient .bg-success
.bg-gradient .bg-warning
.bg-gradient .bg-info
.bg-gradient .bg-danger

If you need to build more complex gradients, see the dedicated utility class for gradients.


Gray Colors

.bg-gray-100
.bg-gray-200
.bg-gray-300
.bg-gray-400
.bg-gray-500
.bg-gray-600
.bg-gray-700
.bg-gray-800
.bg-gray-900

Surface Colors

Start using these surface colors to add a background color on large areas, such the body or sections. This is extremely helpful, especially when you want to make use of light/dark mode. With a few variables all your website adapts to any theme you might use.

.bg-surface-primary
.bg-surface-secondary
.bg-surface-light
.bg-surface-dark

Usage

<div class="bg-primary"></div>

Customizing

Learn how to change the default colors in the styleguide section.

UI Components

Start building incredible websites and apps with the pre-made components and pages.

Explore ->