Skip to main content

Documentation Index

Fetch the complete documentation index at: https://skelementorcss.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

Use background color utilities for surfaces, panels, and status-driven fills.
ClassHex
.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