Background Color

Utilities for controlling an element's background color.

React propsCSS Properties
backgroundColor={color}background-color: {color};
bg={color}background-color: {color};


Control the background color of an element using the bg={color} or backgroundColor={color} utilities.

<x.button bg="emerald-500">Button</x.button>

Changing opacity

Use color opacity variants to choose another opacity.

<x.div bg="purple-600-a100"></x.div> <x.div bg="purple-600-a75"></x.div> <x.div bg="purple-600-a50"></x.div> <x.div bg="purple-600-a25"></x.div> <x.div bg="purple-600-a0"></x.div>


Control the hover background color of an element using the bg={{ hover: color }} or backgroundColor={{ hover: color}} utilities.

<x.button bg={{ _: 'indigo-500', hover: 'indigo-800' }}>Button</x.button>


To control the background color of an element at a specific breakpoint, use responsive object notation. For example, adding the property bg={{ md: "red-500" }} to an element would apply the bg="red-500" utility at medium screen sizes and above.

<x.button bg={{ md: 'red-500' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.



If you'd like to customize your values for kind of colors, use the theme.colors section of your theme.

  // theme.js
  import { th, generateHexAlphaVariants } from '@xstyled/styled-components'

  export const theme = {
    colors: generateHexAlphaVariants({
      // ...
+     'deep-blue': '#00008b',
+     'primary': th.color('red-600'),
Edit this page on GitHub