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: #F8F8FA;
 
bg-gray-100background-color: #F2F1F6;
 
bg-gray-200background-color: #E5E4E9;
 
bg-gray-300background-color: #CCCBD1;
 
bg-gray-400background-color: #A9A8AF;
 
bg-gray-500background-color: #77767F;
 
bg-gray-600background-color: #55545D;
 
bg-gray-700background-color: #35343C;
 
bg-gray-800background-color: #222128;
 
bg-gray-900background-color: #0F0D16;
 
bg-graybackground-color: #E5E4E9;
 
bg-violet-0background-color: #F8F5FF;
 
bg-violet-100background-color: #EDE0FE;
 
bg-violet-200background-color: #D7BCFD;
 
bg-violet-300background-color: #B482FA;
 
bg-violet-400background-color: #9553F8;
 
bg-violet-500background-color: #680CE9;
 
bg-violet-600background-color: #5900BE;
 
bg-violet-700background-color: #440087;
 
bg-violet-800background-color: #340060;
 
bg-violet-900background-color: #1E0033;
 
bg-violetbackground-color: #680CE9;
 
bg-magenta-0background-color: #FBF5FF;
 
bg-magenta-100background-color: #F5DEFE;
 
bg-magenta-200background-color: #EEBCFC;
 
bg-magenta-300background-color: #E181F3;
 
bg-magenta-400background-color: #C846E0;
 
bg-magenta-500background-color: #BF04DC;
 
bg-magenta-600background-color: #A300A8;
 
bg-magenta-700background-color: #92008A;
 
bg-magenta-800background-color: #7A0373;
 
bg-magenta-900background-color: #34002B;
 
bg-magentabackground-color: #BF04DC;
 
bg-blue-0background-color: #E5FAFF;
 
bg-blue-100background-color: #C6ECFC;
 
bg-blue-200background-color: #A3D3FB;
 
bg-blue-300background-color: #76AAEF;
 
bg-blue-400background-color: #4B7AD9;
 
bg-blue-500background-color: #2157CE;
 
bg-blue-600background-color: #1F3EAA;
 
bg-blue-700background-color: #0D227E;
 
bg-blue-800background-color: #01145E;
 
bg-blue-900background-color: #00062F;
 
bg-bluebackground-color: #76AAEF;
 
bg-teal-0background-color: #D6FFF5;
 
bg-teal-100background-color: #B5F6E9;
 
bg-teal-200background-color: #76E4D7;
 
bg-teal-300background-color: #3CCBC5;
 
bg-teal-400background-color: #2AA1A4;
 
bg-teal-500background-color: #147F87;
 
bg-teal-600background-color: #036873;
 
bg-teal-700background-color: #03414F;
 
bg-teal-800background-color: #012C34;
 
bg-teal-900background-color: #00181E;
 
bg-tealbackground-color: #3CCBC5;
 
bg-green-0background-color: #EBFFE7;
 
bg-green-100background-color: #CFF8C7;
 
bg-green-200background-color: #91EA99;
 
bg-green-300background-color: #40D066;
 
bg-green-400background-color: #32A859;
 
bg-green-500background-color: #148540;
 
bg-green-600background-color: #016E3A;
 
bg-green-700background-color: #064826;
 
bg-green-800background-color: #012C17;
 
bg-green-900background-color: #001A0D;
 
bg-greenbackground-color: #40D066;
 
bg-yellow-0background-color: #FFFAEC;
 
bg-yellow-100background-color: #F9F1C9;
 
bg-yellow-200background-color: #EDE78E;
 
bg-yellow-300background-color: #D4CD52;
 
bg-yellow-400background-color: #B0AA31;
 
bg-yellow-500background-color: #7E7F1B;
 
bg-yellow-600background-color: #636408;
 
bg-yellow-700background-color: #424006;
 
bg-yellow-800background-color: #2A2601;
 
bg-yellow-900background-color: #191700;
 
bg-yellowbackground-color: #D4CD52;
 
bg-orange-0background-color: #FFF5F1;
 
bg-orange-100background-color: #FEDBCE;
 
bg-orange-200background-color: #FFC4A4;
 
bg-orange-300background-color: #F2995B;
 
bg-orange-400background-color: #DF7A30;
 
bg-orange-500background-color: #B45F19;
 
bg-orange-600background-color: #904808;
 
bg-orange-700background-color: #633203;
 
bg-orange-800background-color: #442100;
 
bg-orange-900background-color: #2D1100;
 
bg-orangebackground-color: #F2995B;
 
bg-red-0background-color: #FFF4F4;
 
bg-red-100background-color: #FDC2C4;
 
bg-red-200background-color: #FDB0B1;
 
bg-red-300background-color: #FA7370;
 
bg-red-400background-color: #E04542;
 
bg-red-500background-color: #C02C21;
 
bg-red-600background-color: #A41C1E;
 
bg-red-700background-color: #7B0A0C;
 
bg-red-800background-color: #570305;
 
bg-red-900background-color: #3A0102;
 
bg-redbackground-color: #FA7370;
 
bg-pink-0background-color: #FFF3FF;
 
bg-pink-100background-color: #FEDDFA;
 
bg-pink-200background-color: #FDB1E7;
 
bg-pink-300background-color: #F373C0;
 
bg-pink-400background-color: #E54399;
 
bg-pink-500background-color: #BE276D;
 
bg-pink-600background-color: #A51750;
 
bg-pink-700background-color: #740830;
 
bg-pink-800background-color: #550220;
 
bg-pink-900background-color: #3D0115;
 
bg-pinkbackground-color: #F373C0;
 
bg-lightbackground-color: #F8F8FA;
 
bg-darkbackground-color: #35343C;
 
bg-primarybackground-color: #680CE9;
 
bg-primary-lightbackground-color: #9553F8;
 
bg-primary-darkbackground-color: #5900BE;
 
bg-secondarybackground-color: #1E0033;
 
bg-secondary-lightbackground-color: #440087;
 
bg-secondary-darkbackground-color: #340060;
 
bg-infobackground-color: #76AAEF;
 
bg-info-lightbackground-color: #A3D3FB;
 
bg-info-darkbackground-color: #4B7AD9;
 
bg-successbackground-color: #40D066;
 
bg-success-lightbackground-color: #91EA99;
 
bg-success-darkbackground-color: #32A859;
 
bg-warningbackground-color: #D4CD52;
 
bg-warning-lightbackground-color: #EDE78E;
 
bg-warning-darkbackground-color: #B0AA31;
 
bg-dangerbackground-color: #FA7370;
 
bg-danger-lightbackground-color: #FDB0B1;
 
bg-danger-darkbackground-color: #E04542;
 
bg-brand-primarybackground-color: #680CE9;
 
bg-brand-accentbackground-color: #BF04DC;
 
bg-brand-secondarybackground-color: #1E0033;
 
bg-brand-darkbackground-color: #35343C;
 

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