background color

Utilities for controlling an element's background color.

2025-03-29

Written by: tdtc

ClassStyles
bg-inheritbackground-color: inherit;
bg-currentbackground-color: currentColor;
bg-transparentbackground-color: transparent;
bg-blackbackground-color: var(—color-black); /* #000 */
bg-whitebackground-color: var(—color-white); /* #fff */
bg-(<custom-property>)background-color: var(<custom-property>);
bg-[<value>]background-color: <value>;

other color

see colors

Basic example

Use utilities like bg-white, bg-indigo-500 and bg-transparent to control the background color of an element:

<button class="bg-blue-500 ...">Button A</button>
<button class="bg-cyan-500 ...">Button B</button>
<button class="bg-pink-500 ...">Button C</button>

Changing the opacity

Use the color opacity modifier to control the opacity of an element’s background color:

<button class="bg-sky-500/100 ..."></button>
<button class="bg-sky-500/75 ..."></button>
<button class="bg-sky-500/50 ..."></button>

Using a custom value

Use the bg-[] syntax to set the background color based on a completely custom value:

<div class="bg-[#50d71e] ...">
  <!-- ... -->
</div>

Applying on hover

Prefix a background-color utility with a variant like hover:* to only apply the utility in that state:

<button class="bg-indigo-500 hover:bg-fuchsia-500 ...">Save changes</button>

Ref