> ## Documentation Index
> Fetch the complete documentation index at: https://atomickit.copyelement.com/llms.txt
> Use this file to discover all available pages before exploring further.

# AtomicKit Background Color Utilities for Elementor

> Fill Elementor sections, cards, and panels with AtomicKit's background-* classes covering structural grays and six semantic tokens with shade ramps.

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

| 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` |

## 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.

```html theme={null}
<!-- 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.

```html theme={null}
<!-- 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>
```

<Tip>
  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.
</Tip>

## 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

<CardGroup cols={2}>
  <Card title="Text Colors" icon="font" href="/colors/text-colors">
    Pair backgrounds with matching text color utilities from the same semantic palette.
  </Card>

  <Card title="Border Colors" icon="border-all" href="/colors/border-colors">
    Add definition to panels and cards by combining background fills with border color utilities.
  </Card>
</CardGroup>