Elements logo

Background color

Utilities for controlling an element's background color

Class reference

ClassProperties
bg-currentbackground-color: currentColor;
 
bg-transparentbackground-color: transparent;
 
bg-blackbackground-color: #000;
 
bg-whitebackground-color: #FFF;
 
bg-gray-0background-color: #FDF8FF;
 
bg-gray-100background-color: #F8F6F9;
 
bg-gray-200background-color: #E9E7EA;
 
bg-gray-300background-color: #CFCBCE;
 
bg-gray-400background-color: #A8A3A7;
 
bg-gray-500background-color: #7B7479;
 
bg-gray-600background-color: #514B4F;
 
bg-gray-700background-color: #342E32;
 
bg-gray-800background-color: #231E21;
 
bg-gray-900background-color: #1A1217;
 
bg-graybackground-color: #E9E7EA;
 
bg-violet-0background-color: #F6F3FF;
 
bg-violet-100background-color: #EFE4FF;
 
bg-violet-200background-color: #DCC4FF;
 
bg-violet-300background-color: #BD90FF;
 
bg-violet-400background-color: #944EFA;
 
bg-violet-500background-color: #680CE9;
 
bg-violet-600background-color: #5900BE;
 
bg-violet-700background-color: #49008F;
 
bg-violet-800background-color: #350061;
 
bg-violet-900background-color: #1E0033;
 
bg-violetbackground-color: #680CE9;
 
bg-magenta-0background-color: #FBF3FF;
 
bg-magenta-100background-color: #F7DDFF;
 
bg-magenta-200background-color: #EFB8FD;
 
bg-magenta-300background-color: #E583F7;
 
bg-magenta-400background-color: #D543ED;
 
bg-magenta-500background-color: #BF04DC;
 
bg-magenta-600background-color: #B400BA;
 
bg-magenta-700background-color: #92008A;
 
bg-magenta-800background-color: #630056;
 
bg-magenta-900background-color: #330029;
 
bg-magentabackground-color: #BF04DC;
 
bg-blue-0background-color: #F4FDFF;
 
bg-blue-100background-color: #C2EBFD;
 
bg-blue-200background-color: #90C9F7;
 
bg-blue-300background-color: #64A0EB;
 
bg-blue-400background-color: #4177D8;
 
bg-blue-500background-color: #2753BF;
 
bg-blue-600background-color: #1637A1;
 
bg-blue-700background-color: #0B2381;
 
bg-blue-800background-color: #051560;
 
bg-blue-900background-color: #020D40;
 
bg-bluebackground-color: #64A0EB;
 
bg-teal-0background-color: #F4FFFC;
 
bg-teal-100background-color: #BEF8EC;
 
bg-teal-200background-color: #87E8DC;
 
bg-teal-300background-color: #57CDC8;
 
bg-teal-400background-color: #32A4A8;
 
bg-teal-500background-color: #1A777F;
 
bg-teal-600background-color: #0C515A;
 
bg-teal-700background-color: #05363E;
 
bg-teal-800background-color: #02272D;
 
bg-teal-900background-color: #012026;
 
bg-tealbackground-color: #57CDC8;
 
bg-green-0background-color: #F6FFF4;
 
bg-green-100background-color: #C0F8BE;
 
bg-green-200background-color: #87E891;
 
bg-green-300background-color: #57CD71;
 
bg-green-400background-color: #32A857;
 
bg-green-500background-color: #1A7F40;
 
bg-green-600background-color: #0C5A2D;
 
bg-green-700background-color: #053E20;
 
bg-green-800background-color: #022D17;
 
bg-green-900background-color: #012614;
 
bg-greenbackground-color: #57CD71;
 
bg-yellow-0background-color: #FFFCF4;
 
bg-yellow-100background-color: #F9F0BF;
 
bg-yellow-200background-color: #EAE388;
 
bg-yellow-300background-color: #CECF58;
 
bg-yellow-400background-color: #A2A933;
 
bg-yellow-500background-color: #727D19;
 
bg-yellow-600background-color: #4A550B;
 
bg-yellow-700background-color: #303805;
 
bg-yellow-800background-color: #212702;
 
bg-yellow-900background-color: #1B2101;
 
bg-yellowbackground-color: #CECF58;
 
bg-orange-0background-color: #FFF7F4;
 
bg-orange-100background-color: #FDD0BC;
 
bg-orange-200background-color: #F6AB85;
 
bg-orange-300background-color: #E98C55;
 
bg-orange-400background-color: #D6722F;
 
bg-orange-500background-color: #BB5B16;
 
bg-orange-600background-color: #9B4606;
 
bg-orange-700background-color: #793500;
 
bg-orange-800background-color: #552600;
 
bg-orange-900background-color: #331700;
 
bg-orangebackground-color: #E98C55;
 
bg-red-0background-color: #FFF4F4;
 
bg-red-100background-color: #FDC2C4;
 
bg-red-200background-color: #F79092;
 
bg-red-300background-color: #EB6467;
 
bg-red-400background-color: #D84144;
 
bg-red-500background-color: #BF272A;
 
bg-red-600background-color: #A11618;
 
bg-red-700background-color: #810B0D;
 
bg-red-800background-color: #600507;
 
bg-red-900background-color: #400203;
 
bg-redbackground-color: #EB6467;
 
bg-pink-0background-color: #FFF4FF;
 
bg-pink-100background-color: #FDC2F5;
 
bg-pink-200background-color: #F790DB;
 
bg-pink-300background-color: #EB64B6;
 
bg-pink-400background-color: #D84190;
 
bg-pink-500background-color: #BF276C;
 
bg-pink-600background-color: #A1164E;
 
bg-pink-700background-color: #810B36;
 
bg-pink-800background-color: #600525;
 
bg-pink-900background-color: #400217;
 
bg-pinkbackground-color: #EB64B6;
 
bg-lightbackground-color: #FDF8FF;
 
bg-darkbackground-color: #342E32;
 
bg-primarybackground-color: #680CE9;
 
bg-primary-lightbackground-color: #944EFA;
 
bg-primary-darkbackground-color: #5900BE;
 
bg-secondarybackground-color: #1E0033;
 
bg-secondary-lightbackground-color: #49008F;
 
bg-secondary-darkbackground-color: #350061;
 
bg-infobackground-color: #64A0EB;
 
bg-info-lightbackground-color: #90C9F7;
 
bg-info-darkbackground-color: #4177D8;
 
bg-successbackground-color: #57CD71;
 
bg-success-lightbackground-color: #87E891;
 
bg-success-darkbackground-color: #32A857;
 
bg-warningbackground-color: #CECF58;
 
bg-warning-lightbackground-color: #EAE388;
 
bg-warning-darkbackground-color: #A2A933;
 
bg-dangerbackground-color: #EB6467;
 
bg-danger-lightbackground-color: #F79092;
 
bg-danger-darkbackground-color: #D84144;
 
bg-brand-primarybackground-color: #680CE9;
 
bg-brand-accentbackground-color: #BF04DC;
 
bg-brand-secondarybackground-color: #1E0033;
 
bg-brand-darkbackground-color: #250D2E;
 

# Usage

Control the background color of an element using the .bg-{color} utilities.

<div class="bg-green ..."></div>

# Changing opacity

Control the opacity of an element’s background color using the .bg-opacity-{amount} utilities.

100%
75%
50%
25%
0%
<div class="bg-pink bg-opacity-100 ..."></div>
<div class="bg-pink bg-opacity-75 ..."></div>
<div class="bg-pink bg-opacity-50 ..."></div>
<div class="bg-pink bg-opacity-25 ..."></div>
<div class="bg-pink bg-opacity-0 ..."></div>

Learn more in the background opacity documentation.

# Responsive

To control the background color of an element at a specific breakpoint, add a {screen}: prefix to any existing background color utility. For example, use md:bg-green-500 to apply the bg-green-500 utility at only medium screen sizes and above.

<button class="bg-blue-500 md:bg-green-500 ...">Button</button>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.

# Hover

To control the background color of an element on hover, add the hover: prefix to any existing background color utility. For example, use hover:bg-blue-500 to apply the bg-blue-500 utility on hover.

<button class="bg-red hover:bg-red-600 ...">Button</button>

Hover utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the focus: prefix.

<button class="... md:bg-violet-500 md:hover:bg-violet-600 ...">Button</button>

# Focus

To control the background color of an element on focus, add the focus: prefix to any existing background color utility. For example, use focus:bg-blue-500 to apply the bg-blue-500 utility on focus.

<input class="bg-gray-100 focus:bg-white ...">

Focus utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the focus: prefix.

<input class="... md:bg-white md:focus:bg-gray-0 ...">