Skip to main content
Background color utilities set the background-color property on any Elementor element with a single class. AtomicKit includes structural surface colors — white, black, and a gray scale — alongside six semantic tokens for brand and status-driven fills. Every semantic token supports an 11-step shade ramp, giving you light tints for subtle section backgrounds and deep shades for high-contrast panels, all without writing custom CSS.

​
Available Background Color Classes

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

​
Surface and Semantic Fill Examples

Default to white or gray-light for content surfaces. Reach for semantic fills when the background itself carries meaning — a success confirmation panel, an error alert, or a brand-colored hero section. 
<!-- Neutral content surfaces -->
<section class="background-white">
  <p class="text-gray-dark">Standard content area on a white surface.</p>
</section>

<div class="background-gray-light">
  <p class="text-gray-dark">Slightly recessed card or sidebar panel.</p>
</div>

<!-- Semantic status fills -->
<div class="background-success text-white">
  <p>Your order has been placed successfully.</p>
</div>

<div class="background-warning text-black">
  <p>Your trial expires in 3 days.</p>
</div>

<div class="background-error text-white">
  <p>We could not process your payment.</p>
</div>

<!-- Brand hero section -->
<section class="background-primary text-white">
  <h1>Build faster with AtomicKit</h1>
  <p>Utility-first CSS for Elementor.</p>
</section>

​
Using Shade Variants

Append -l-1 through -l-5 for lighter tints or -d-1 through -d-5 for deeper shades on any semantic token. Lighter steps work well for subtle section tints; darker steps suit footer bands, modals, or emphasis panels. 
<!-- Very light primary tint for a feature highlight section -->
<section class="background-primary-l-5">
  <h2 class="text-primary-d-2">Why AtomicKit?</h2>
  <p class="text-gray-dark">A light tint keeps the brand presence without overwhelming the content.</p>
</section>

<!-- Mid-tint success background for a confirmation banner -->
<div class="background-success-l-4 text-success-d-3">
  Changes saved.
</div>

<!-- Deep neutral shade for a dark footer -->
<footer class="background-neutral-d-4 text-white">
  © 2025 Your Company
</footer>
When using a shade variant lighter than the base, check that your text color still reads clearly. A very light background-primary tint paired with .text-primary can drop below readable contrast — step your text color darker with .text-primary-d-2 or .text-primary-d-3 to compensate.

​
Best Practices

  • Default to white and gray-light for content areas. These neutral surfaces keep reading contrast high and let foreground elements — text, icons, buttons — draw attention naturally.
  • Use saturated semantic fills only when meaning fits. A green background signals success; a red background signals an error. Applying them purely for decoration creates confusing UX patterns.
  • Pair strong backgrounds with a verified text color. Dark backgrounds (black, gray-dark, primary, neutral-d-4) should use .text-white. Light semantic fills should use the corresponding dark shade of the same token or .text-black — always check the actual contrast ratio.
  • Use shade variants to create depth without multiple components. A card inside a section can step one level lighter (e.g., background-primary-l-5 section → background-white card) to create visual separation without a border or shadow.

​
Related

Text Colors

Pair backgrounds with matching text color utilities from the same semantic palette.

Border Colors

Add definition to panels and cards by combining background fills with border color utilities.