The background-color property sets the background color of the element. The value of the property is any color unit.

Initial Value transparent
Applies to All elements, including ::first-letter and ::first-line
Inheritance no
Animation color value

The background-color property specifies a background color for the element. The values that can be used to specify color are the ones defined by the standard, such as RGB, RGBA, HSL, HSLA and Predefined Colors. This property can handle single-color fills and transparent tones. Gradients are treated as images and cannot be controlled with this property.

To specify a gradient for the background, use background-image or the shorthand property background, which can handle images.


/* Keyword values */

background-color: cyan;
background-color: maroon;
background-color: magenta;
background-color: black;

/* Hexadecimal values */

background-color: #ffffff; /* white/opaque */
background-color: #fff; /* shorthand for white/opaque */
background-color: #ffffffaa; /* white/opaque with added alpha value */
background-color: #fffa; /* white/opaque shorthand with alpha */

/* RGB values */

background-color: rgb(255, 255, 255); /* white/opaque */

/* HSL value */

background-color: hsl(240, 100%, 50%); /* opaque blue */

/* Property-specific values */

background-color: currentcolor;
background-color: transparent;

/* Global values */

background-color: inherit;
background-color: initial;
background-color: revert;
background-color: unset;


valuewhat it does
colorSets the background color.
transparentDefault value. Specifies that the background should be transparent.
currentcolorInherits the background-color of the container.
initialSets the default value.
inheritThe value is inherited from the parent element.