New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

#background-color

Defines the color of the element's background.

default background-color: transparent;

By default, the background color is transparent, basically meaning that there is no background color.

background-color: red;

You can use one of the 140+ color names.

background-color: #05ffb0;

You can use hexadecimal color codes.

background-color: rgb(50, 115, 220);

You can use rgb() color codes:

  • the first value is for red
  • the second value is for green
  • the third value is for blue

Each of them can have a value between 0 and 255.

background-color: rgba(50, 115, 220, 0.3);

You can use rgba() color codes:

  • the first 3 values are for rgb
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

background-color: hsl(14, 100%, 53%);

You can use hsl() color codes:

  • the first value is for hue and can go from 0 to 359
  • the second value is for saturation and go from 0% to 100%
  • the third value is for luminosity and go from 0% to 100%

background-color: hsla(14, 100%, 53%, 0.6);

You can use hsl()a color codes:

  • the first 3 values are for hsl
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).