tailwindcss/docs/source/backgrounds.md

---
extends: _layouts.master
title: "Backgrounds"
---

# Backgrounds

<table class="text-sm" style="border-collapse: separate; border-spacing: 0; width: 100%;">
  <tr>
    <td class="w-24 h-12 bg-light border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-light</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-light-soft border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-light-soft</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-light-softer border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-light-softer</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-dark border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-dark</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-dark-soft border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-dark-soft</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-dark-softer border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-dark-softer</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-red border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-red</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-red-light border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-red-light</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-orange border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-orange</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-orange-light border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-orange-light</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-yellow-light border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-yellow-light</code></td>
    <td class="w-24 h-12 bg-amber border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-amber</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-amber-light border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-amber-light</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-yellow border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-yellow</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-green border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-green</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-green-light border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-green-light</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-teal border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-teal</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-teal-light border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-teal-light</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-blue border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-blue</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-blue-light border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-blue-light</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-indigo border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-indigo</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-indigo-light border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-indigo-light</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-purple border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-purple</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-purple-light border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-purple-light</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-pink border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-pink</code></td>
  </tr>
  <tr>
    <td class="w-24 h-12 bg-pink-light border-b border-dark-overlay-softer"></td>
    <td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-pink-light</code></td>
  </tr>
</table>
</table>

Using the utilities in HTML:

```html
<div class="bg-light"></div>
<div class="bg-light-soft"></div>
<div class="bg-light-softer"></div>
<div class="bg-light-softest"></div>

<div class="bg-dark"></div>
<div class="bg-dark-soft"></div>
<div class="bg-dark-softer"></div>
<div class="bg-dark-softest"></div>
```

Using the utilities in Less:

```less
div {
  .bg-light;
  .bg-light-soft;
  .bg-light-softer;
  .bg-light-softest;

  .bg-dark;
  .bg-dark-soft;
  .bg-dark-softer;
  .bg-dark-softest;
}
```

## Responsive

The background utitlies can also be used with <a href="/responsive">responsive</a> prefixes:

```html
<!-- Using the utilities in HTML: -->

<div class="bg-dark sm:bg-dark-soft md:bg-dark-softer lg:bg-dark-softest"></div>
```

```less
// Using the utilities in Less:

div {
  .screen(lg, {
    .bg-light;
  });
}
```


## Custom backgrounds

How to generate custom background utilities:

```less
.define-text-color('primary';
  default #3498db,
  'light' #a0cfee,
  'dark'  #2980b9
;);
```

How to use custom background utilities:

```html
<!-- Using custom utilities in HTML: -->

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

<!-- Responsive example -->
<div class="bg-primary sm:bg-primary-dark"></div>
```

```less
// Using custom utilities in Less:

div {
  .bg-primary;
  .bg-primary-light;
  .bg-primary-dark;

  // Responsive example
  .screen(lg, {
    .bg-primary;
  });
}
```