Background Colors

Overview

Use background color utilities for surfaces, panels, and status-driven fills.

Class	Hex
`.background-white`	`#ffffff`
`.background-black`	`#000000`
`.background-gray-dark`	`#374151`
`.background-gray`	`#6b7280`
`.background-gray-light`	`#f3f4f6`
`.background-primary`	`#0740f9`
`.background-secondary`	`#aaebfd`
`.background-neutral`	`#6b7280`
`.background-success`	`#3DC13C`
`.background-warning`	`#F4BB1B`
`.background-error`	`#F13737`

Semantic tokens also support .background-{token}-l-5 through .background-{token}-d-5; hex steps match the Color Palette.

Examples

<div class="elementor-element background-white padding-6 rounded-lg">White</div>
<div class="elementor-element background-gray-light padding-6 rounded-lg">Gray light</div>
<div class="elementor-element background-primary text-white padding-6 rounded-lg">Primary</div>
<div class="elementor-element background-success text-white padding-6 rounded-lg">Success</div>
<div class="elementor-element background-error text-white padding-6 rounded-lg">Error</div>

Usage Notes

Classes set background-color. Structural fills support layouts, while semantic tokens match Colors. Shade steps use background-{token}-l-5 … background-{token}-d-5 on semantic tokens only.

Best practices

Default to white / gray-light for content; use saturated semantic fills when the meaning fits.
Pair strong backgrounds with white or black text (or a verified contrast-safe class).

Text Colors

Text colors

Border Colors

Border colors

Getting Started

Concepts

Typography

Layout

Spacing

Sizing

Background

Effects

Filters

Flexbox

Borders

Components

Overview

Examples

Usage Notes

Best practices

Text Colors

Border Colors

​Overview

​Examples

​Usage Notes

​Best practices

​Related utilities

Text Colors

Border Colors

Overview

Examples

Usage Notes

Best practices

Related utilities