background-color

Utilities for controlling an element's background color.

Quick reference

Class	Styles
bg-inherit	background-color: inherit;
bg-current	background-color: currentColor;
bg-transparent	background-color: transparent;
bg-{name}	background-color: var(--color-{name});
bg-(<custom-property>)	background-color: var(<custom-property>);
bg-[<value>]	background-color: <value>;

Complete class list

Class	Styles
bg-black	background-color: var(--color-black);
bg-white	background-color: var(--color-white);
bg-slate-50	background-color: var(--color-slate-50);
bg-slate-100	background-color: var(--color-slate-100);
bg-slate-200	background-color: var(--color-slate-200);
bg-slate-300	background-color: var(--color-slate-300);
bg-slate-400	background-color: var(--color-slate-400);
bg-slate-500	background-color: var(--color-slate-500);
bg-slate-600	background-color: var(--color-slate-600);
bg-slate-700	background-color: var(--color-slate-700);
bg-slate-800	background-color: var(--color-slate-800);
bg-slate-900	background-color: var(--color-slate-900);
bg-slate-950	background-color: var(--color-slate-950);
bg-gray-50	background-color: var(--color-gray-50);
bg-gray-100	background-color: var(--color-gray-100);
bg-gray-200	background-color: var(--color-gray-200);
bg-gray-300	background-color: var(--color-gray-300);
bg-gray-400	background-color: var(--color-gray-400);
bg-gray-500	background-color: var(--color-gray-500);
bg-gray-600	background-color: var(--color-gray-600);
bg-gray-700	background-color: var(--color-gray-700);
bg-gray-800	background-color: var(--color-gray-800);
bg-gray-900	background-color: var(--color-gray-900);
bg-gray-950	background-color: var(--color-gray-950);
bg-zinc-50	background-color: var(--color-zinc-50);
bg-zinc-100	background-color: var(--color-zinc-100);
bg-zinc-200	background-color: var(--color-zinc-200);
bg-zinc-300	background-color: var(--color-zinc-300);
bg-zinc-400	background-color: var(--color-zinc-400);
bg-zinc-500	background-color: var(--color-zinc-500);
bg-zinc-600	background-color: var(--color-zinc-600);
bg-zinc-700	background-color: var(--color-zinc-700);
bg-zinc-800	background-color: var(--color-zinc-800);
bg-zinc-900	background-color: var(--color-zinc-900);
bg-zinc-950	background-color: var(--color-zinc-950);
bg-neutral-50	background-color: var(--color-neutral-50);
bg-neutral-100	background-color: var(--color-neutral-100);
bg-neutral-200	background-color: var(--color-neutral-200);
bg-neutral-300	background-color: var(--color-neutral-300);
bg-neutral-400	background-color: var(--color-neutral-400);
bg-neutral-500	background-color: var(--color-neutral-500);
bg-neutral-600	background-color: var(--color-neutral-600);
bg-neutral-700	background-color: var(--color-neutral-700);
bg-neutral-800	background-color: var(--color-neutral-800);
bg-neutral-900	background-color: var(--color-neutral-900);
bg-neutral-950	background-color: var(--color-neutral-950);
bg-stone-50	background-color: var(--color-stone-50);
bg-stone-100	background-color: var(--color-stone-100);
bg-stone-200	background-color: var(--color-stone-200);
bg-stone-300	background-color: var(--color-stone-300);
bg-stone-400	background-color: var(--color-stone-400);
bg-stone-500	background-color: var(--color-stone-500);
bg-stone-600	background-color: var(--color-stone-600);
bg-stone-700	background-color: var(--color-stone-700);
bg-stone-800	background-color: var(--color-stone-800);
bg-stone-900	background-color: var(--color-stone-900);
bg-stone-950	background-color: var(--color-stone-950);

| bg-red-50 | background-color: var(--color-red-50); | | bg-red-100 | background-color: var(--color-red-100); | | bg-red-200 | background-color: var(--color-red-200); | | bg-red-300 | background-color: var(--color-red-300); | | bg-red-400 | background-color: var(--color-red-400); | | bg-red-500 | background-color: var(--color-red-500); | | bg-red-600 | background-color: var(--color-red-600); | | bg-red-700 | background-color: var(--color-red-700); | | bg-red-800 | background-color: var(--color-red-800); | | bg-red-900 | background-color: var(--color-red-900); | | bg-red-950 | background-color: var(--color-red-950); | | bg-orange-50 | background-color: var(--color-orange-50); | | bg-orange-100 | background-color: var(--color-orange-100); | | bg-orange-200 | background-color: var(--color-orange-200); | | bg-orange-300 | background-color: var(--color-orange-300); | | bg-orange-400 | background-color: var(--color-orange-400); | | bg-orange-500 | background-color: var(--color-orange-500); | | bg-orange-600 | background-color: var(--color-orange-600); | | bg-orange-700 | background-color: var(--color-orange-700); | | bg-orange-800 | background-color: var(--color-orange-800); | | bg-orange-900 | background-color: var(--color-orange-900); | | bg-orange-950 | background-color: var(--color-orange-950); | | bg-amber-50 | background-color: var(--color-amber-50); | | bg-amber-100 | background-color: var(--color-amber-100); | | bg-amber-200 | background-color: var(--color-amber-200); | | bg-amber-300 | background-color: var(--color-amber-300); | | bg-amber-400 | background-color: var(--color-amber-400); | | bg-amber-500 | background-color: var(--color-amber-500); | | bg-amber-600 | background-color: var(--color-amber-600); | | bg-amber-700 | background-color: var(--color-amber-700); | | bg-amber-800 | background-color: var(--color-amber-800); | | bg-amber-900 | background-color: var(--color-amber-900); | | bg-amber-950 | background-color: var(--color-amber-950); | | bg-yellow-50 | background-color: var(--color-yellow-50); | | bg-yellow-100 | background-color: var(--color-yellow-100); | | bg-yellow-200 | background-color: var(--color-yellow-200); | | bg-yellow-300 | background-color: var(--color-yellow-300); | | bg-yellow-400 | background-color: var(--color-yellow-400); | | bg-yellow-500 | background-color: var(--color-yellow-500); | | bg-yellow-600 | background-color: var(--color-yellow-600); | | bg-yellow-700 | background-color: var(--color-yellow-700); | | bg-yellow-800 | background-color: var(--color-yellow-800); | | bg-yellow-900 | background-color: var(--color-yellow-900); | | bg-yellow-950 | background-color: var(--color-yellow-950); |

| bg-lime-50 | background-color: var(--color-lime-50); | | bg-lime-100 | background-color: var(--color-lime-100); | | bg-lime-200 | background-color: var(--color-lime-200); | | bg-lime-300 | background-color: var(--color-lime-300); | | bg-lime-400 | background-color: var(--color-lime-400); | | bg-lime-500 | background-color: var(--color-lime-500); | | bg-lime-600 | background-color: var(--color-lime-600); | | bg-lime-700 | background-color: var(--color-lime-700); | | bg-lime-800 | background-color: var(--color-lime-800); | | bg-lime-900 | background-color: var(--color-lime-900); | | bg-lime-950 | background-color: var(--color-lime-950); | | bg-green-50 | background-color: var(--color-green-50); | | bg-green-100 | background-color: var(--color-green-100); | | bg-green-200 | background-color: var(--color-green-200); | | bg-green-300 | background-color: var(--color-green-300); | | bg-green-400 | background-color: var(--color-green-400); | | bg-green-500 | background-color: var(--color-green-500); | | bg-green-600 | background-color: var(--color-green-600); | | bg-green-700 | background-color: var(--color-green-700); | | bg-green-800 | background-color: var(--color-green-800); | | bg-green-900 | background-color: var(--color-green-900); | | bg-green-950 | background-color: var(--color-green-950); | | bg-emerald-50 | background-color: var(--color-emerald-50); | | bg-emerald-100 | background-color: var(--color-emerald-100); | | bg-emerald-200 | background-color: var(--color-emerald-200); | | bg-emerald-300 | background-color: var(--color-emerald-300); | | bg-emerald-400 | background-color: var(--color-emerald-400); | | bg-emerald-500 | background-color: var(--color-emerald-500); | | bg-emerald-600 | background-color: var(--color-emerald-600); | | bg-emerald-700 | background-color: var(--color-emerald-700); | | bg-emerald-800 | background-color: var(--color-emerald-800); | | bg-emerald-900 | background-color: var(--color-emerald-900); | | bg-emerald-950 | background-color: var(--color-emerald-950); |

| bg-teal-50 | background-color: var(--color-teal-50); | | bg-teal-100 | background-color: var(--color-teal-100); | | bg-teal-200 | background-color: var(--color-teal-200); | | bg-teal-300 | background-color: var(--color-teal-300); | | bg-teal-400 | background-color: var(--color-teal-400); | | bg-teal-500 | background-color: var(--color-teal-500); | | bg-teal-600 | background-color: var(--color-teal-600); | | bg-teal-700 | background-color: var(--color-teal-700); | | bg-teal-800 | background-color: var(--color-teal-800); | | bg-teal-900 | background-color: var(--color-teal-900); | | bg-teal-950 | background-color: var(--color-teal-950); | | bg-cyan-50 | background-color: var(--color-cyan-50); | | bg-cyan-100 | background-color: var(--color-cyan-100); | | bg-cyan-200 | background-color: var(--color-cyan-200); | | bg-cyan-300 | background-color: var(--color-cyan-300); | | bg-cyan-400 | background-color: var(--color-cyan-400); | | bg-cyan-500 | background-color: var(--color-cyan-500); | | bg-cyan-600 | background-color: var(--color-cyan-600); | | bg-cyan-700 | background-color: var(--color-cyan-700); | | bg-cyan-800 | background-color: var(--color-cyan-800); | | bg-cyan-900 | background-color: var(--color-cyan-900); | | bg-cyan-950 | background-color: var(--color-cyan-950); | | bg-sky-50 | background-color: var(--color-sky-50); | | bg-sky-100 | background-color: var(--color-sky-100); | | bg-sky-200 | background-color: var(--color-sky-200); | | bg-sky-300 | background-color: var(--color-sky-300); | | bg-sky-400 | background-color: var(--color-sky-400); | | bg-sky-500 | background-color: var(--color-sky-500); | | bg-sky-600 | background-color: var(--color-sky-600); | | bg-sky-700 | background-color: var(--color-sky-700); | | bg-sky-800 | background-color: var(--color-sky-800); | | bg-sky-900 | background-color: var(--color-sky-900); | | bg-sky-950 | background-color: var(--color-sky-950); | | bg-blue-50 | background-color: var(--color-blue-50); | | bg-blue-100 | background-color: var(--color-blue-100); | | bg-blue-200 | background-color: var(--color-blue-200); | | bg-blue-300 | background-color: var(--color-blue-300); | | bg-blue-400 | background-color: var(--color-blue-400); | | bg-blue-500 | background-color: var(--color-blue-500); | | bg-blue-600 | background-color: var(--color-blue-600); | | bg-blue-700 | background-color: var(--color-blue-700); | | bg-blue-800 | background-color: var(--color-blue-800); | | bg-blue-900 | background-color: var(--color-blue-900); | | bg-blue-950 | background-color: var(--color-blue-950); | | bg-indigo-50 | background-color: var(--color-indigo-50); | | bg-indigo-100 | background-color: var(--color-indigo-100); | | bg-indigo-200 | background-color: var(--color-indigo-200); | | bg-indigo-300 | background-color: var(--color-indigo-300); | | bg-indigo-400 | background-color: var(--color-indigo-400); | | bg-indigo-500 | background-color: var(--color-indigo-500); | | bg-indigo-600 | background-color: var(--color-indigo-600); | | bg-indigo-700 | background-color: var(--color-indigo-700); | | bg-indigo-800 | background-color: var(--color-indigo-800); | | bg-indigo-900 | background-color: var(--color-indigo-900); | | bg-indigo-950 | background-color: var(--color-indigo-950); | | bg-violet-50 | background-color: var(--color-violet-50); | | bg-violet-100 | background-color: var(--color-violet-100); | | bg-violet-200 | background-color: var(--color-violet-200); | | bg-violet-300 | background-color: var(--color-violet-300); | | bg-violet-400 | background-color: var(--color-violet-400); | | bg-violet-500 | background-color: var(--color-violet-500); | | bg-violet-600 | background-color: var(--color-violet-600); | | bg-violet-700 | background-color: var(--color-violet-700); | | bg-violet-800 | background-color: var(--color-violet-800); | | bg-violet-900 | background-color: var(--color-violet-900); | | bg-violet-950 | background-color: var(--color-violet-950); |

Examples

Basic example

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

<!-- [!code classes:bg-blue-500,bg-cyan-500,bg-pink-500] -->
<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:

<!-- [!code word:/100] -->
<!-- [!code word:/75] -->
<!-- [!code word:/50] -->
<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-[<value>] syntax to set the background color based on a completely custom value:

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

For CSS variables, you can also use the bg-(<custom-property>) syntax:

<div class="bg-(--my-color) ...">
  <!-- ... -->
</div>

This is just a shorthand for bg-[var(<custom-property>)] that adds the var() function for you automatically.

Applying on hover

Use the hover: prefix to conditionally apply a background color on hover:

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

Responsive design

Prefix a background-color utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="bg-blue-500 md:bg-green-500 ...">
  <!-- ... -->
</div>

Customizing your theme

Use your design tokens to populate --color-* variables and reference them with bg-{name} (for example, bg-blue-500). You can also use arbitrary values with bg-[<value>] and custom properties with bg-(<custom-property>).

For example, to add a custom color to your theme:

Then use it in your HTML:

<div class="bg-regal-blue">
  <!-- ... -->
</div>