Background Color - Tailwind CSS

v4.1⌘KCtrl KDocsBlogShowcaseSponsorPlus

1. Backgrounds
2. background-color

• Documentation
• Components
• Templates
• UI Kit
• Playground
• CourseNew
• Community

Getting started

• Installation
• Editor setup
• Compatibility
• Upgrade guide

Core concepts

• Styling with utility classes
• Hover, focus, and other states
• Responsive design
• Dark mode
• Theme variables
• Colors
• Adding custom styles
• Detecting classes in source files
• Functions and directives

Base styles

• Preflight

Layout

• aspect-ratio
• columns
• break-after
• break-before
• break-inside
• box-decoration-break
• box-sizing
• display
• float
• clear
• isolation
• object-fit
• object-position
• overflow
• overscroll-behavior
• position
• top / right / bottom / left
• visibility
• z-index

Flexbox & Grid

• flex-basis
• flex-direction
• flex-wrap
• flex
• flex-grow
• flex-shrink
• order
• grid-template-columns
• grid-column
• grid-template-rows
• grid-row
• grid-auto-flow
• grid-auto-columns
• grid-auto-rows
• gap
• justify-content
• justify-items
• justify-self
• align-content
• align-items
• align-self
• place-content
• place-items
• place-self

Spacing

• padding
• margin

Sizing

• width
• min-width
• max-width
• height
• min-height
• max-height

Typography

• font-family
• font-size
• font-smoothing
• font-style
• font-weight
• font-stretch
• font-variant-numeric
• letter-spacing
• line-clamp
• line-height
• list-style-image
• list-style-position
• list-style-type
• text-align
• color
• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-underline-offset
• text-transform
• text-overflow
• text-wrap
• text-indent
• vertical-align
• white-space
• word-break
• overflow-wrap
• hyphens
• content

Backgrounds

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

Borders

• border-radius
• border-width
• border-color
• border-style
• outline-width
• outline-color
• outline-style
• outline-offset

Effects

• box-shadow
• text-shadow
• opacity
• mix-blend-mode
• background-blend-mode
• mask-clip
• mask-composite
• mask-image
• mask-mode
• mask-origin
• mask-position
• mask-repeat
• mask-size
• mask-type

Filters

• filter
  • blur
  • brightness
  • contrast
  • drop-shadow
  • grayscale
  • hue-rotate
  • invert
  • saturate
  • sepia
• backdrop-filter
  • blur
  • brightness
  • contrast
  • grayscale
  • hue-rotate
  • invert
  • opacity
  • saturate
  • sepia

Tables

• border-collapse
• border-spacing
• table-layout
• caption-side

Transitions & Animation

• transition-property
• transition-behavior
• transition-duration
• transition-timing-function
• transition-delay
• animation

Transforms

• backface-visibility
• perspective
• perspective-origin
• rotate
• scale
• skew
• transform
• transform-origin
• transform-style
• translate

Interactivity

• accent-color
• appearance
• caret-color
• color-scheme
• cursor
• field-sizing
• pointer-events
• resize
• scroll-behavior
• scroll-margin
• scroll-padding
• scroll-snap-align
• scroll-snap-stop
• scroll-snap-type
• touch-action
• user-select
• will-change

SVG

• fill
• stroke
• stroke-width

Accessibility

• forced-color-adjust

Backgrounds

background-color

Utilities for controlling an element's background color.

Class	Styles
bg-inherit	background-color: inherit;
bg-current	background-color: currentColor;
bg-transparent	background-color: transparent;
bg-black	background-color: var(--color-black); /* #000 */
bg-white	background-color: var(--color-white); /* #fff */
bg-red-50	background-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */
bg-red-100	background-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */
bg-red-200	background-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */
bg-red-300	background-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */
bg-red-400	background-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */

Show more

Examples

Basic example

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

bg-blue-500

Button A

bg-cyan-500

Button B

bg-pink-500

Button C<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:

bg-sky-500/100

Button A

bg-sky-500/75

Button B

bg-sky-500/50

Button C<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

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

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

Learn more about using variants in the variants documentation.

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>

Learn more about using variants in the variants documentation.

Customizing your theme

Use the --color-* theme variables to customize the color utilities in your project:

@theme { --color-regal-blue: #243c5a; }

Now the bg-regal-blue utility can be used in your markup:

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

Learn more about customizing your theme in the theme documentation.

On this page

• Quick reference
• Examples
  • Basic example
  • Changing the opacity
  • Using a custom value
  • Applying on hover
  • Responsive design
• Customizing your theme

Copyright © 2025 Tailwind Labs Inc.·Trademark Policy